无法理解此验证未按预期工作的原因

Unable to understand why this validation is not working as intended

本文关键字：工作 验证      更新时间：2023-09-26

我的问题是，我想以javascript面向对象的方式验证我的表单，但我无法使其工作。

这是小提琴

HTML:------------------------------------------------------------------------------------------------------

<form id="contact-form" action="#" method="get">
    <ul>
       <li><input type="text" id='fname' name='fname' class='required' placeholder="Firstname"/></li>
       <li><input type="text" id='lname' name='lname' class='required' placeholder="Lastname"/></li>
       <li><input type="password" id='pwd' name='pwd' class='required' placeholder="Password"/></li>
       <li><input type="password" id='confPwd' name='confPwd' class='required' placeholder="Confirm password"/></li>
       <li><input type="text" id='email' name='email' class='required' placeholder="Email"/></li>
       <li><input type="text" id='website' name='website' class='required' placeholder="Website"/></li>
       <li>
           <input type="submit" id='submit' value="Submit" />
       </li>
    </ul>
</form>

JS&JQUERY：---------------------------------------------------------------------------------------------

 var formValidate = {
      validate: function(elem) {
          var frm = elem.attr('id');
           $('.required', '#' + frm).each(function() {
                if ($(this).val() === '') {
                     alert($(this).attr('id') + ' is a required field.'); //<---gets here
                     $(this).focus();
                     return false; // <--not returning false
                }
           });
      }
 };
 $(function() {
     $('form').submit(function() {
           formValidate.validate($('form'));
     });
 });

http://jsfiddle.net/mNu2a/3/

您需要在submit处理程序中返回验证标志。

$(function () {
    $('form').submit(function () {
        return formValidate.validate($('form'));
    });
});

此外，您的return语句只是中断了each函数，而不是从validate方法返回。

validate: function (elem) {
    var isValid = true;
    var frm = elem.attr('id');
    $('.required', '#' + frm).each(function () {
        if ($(this).val() === '' && isValid) {
            alert($(this).attr('id') + ' is a required field.');
            $(this).focus();
            isValid = false;
            return false;
        }
    });
    return isValid;
}

您可以稍微简化验证功能：

http://jsfiddle.net/mNu2a/4/

validate: function (elem) {
    var isValid = true;
    $('.required', elem).each(function () {
        var $this = $(this);
        if ($this.val() === '' && isValid) {
            alert($this.attr('placeholder') + ' is a required field.');
            $this.focus();
            isValid = false;
            return false;
        }
    });
    return isValid;
}

使用e.preventDefault()

$(function () {
    $('form').submit(function (e) {
        e.preventDefault();
        formValidate.validate($('form'));
    });
});

 var formValidate = {
      validate: function(elem) {
          var frm = elem.attr('id');
           $('.required', '#' + frm).each(function() {
                if ($(this).val() === '') {
                     alert($(this).attr('id') + ' is a required field.');
                     $(this).focus();
                     return false; // <- affects "each" scope, not function scope
                }
           });
      }
 };

更改为：

 var formValidate = {
      validate: function(elem) {
          var frm = elem.attr('id');
          var invalid = 0;
           $('.required', '#' + frm).each(function() {
                if ($(this).val() === '') {
                     alert($(this).attr('id') + ' is a required field.');
                     $(this).focus();
                     invalid++;
                     return false; // <- affects "each", therefore stopping the loop
                }
           });
          // add these, to also return value from function
          if (invalid > 0) return false;
          return true;
      }
 };

对于您的提交处理程序：

 $(function() {
     $('form').submit(function() {
           return formValidate.validate( $(this) ); // you must pass the returned value to your submit callback
     });
 });

一个工作示例：http://jsfiddle.net/psycketom/QnbKU/

相关文章：