Javascript验证没有按照规定执行

Question

我的JS验证代码有问题。当我提交表格并且有错误时，表格不应该再进一步。但是，代码并没有停止，而是继续到下一行，虽然仍然存在错误，但它显示出成功的消息。

而且我已经写清楚，如果，例如该字段为空，然后return false ...

为什么到下一行代码随身携带，即使有return false？

按submit你会明白我的意思。

JS：

(function(window, $) { 

    var Namespace = (function(Namespace) { 

     Namespace = { 

      // Main 
      run : function() { 
       this.validate.run('form'); 
      },    

      // Validation 
      validate : { 

       // error message span 
       messageBox : '<span class="message" />', 

       // add any field here 
       fields : { 
        nameField : $('#contact-name'), 
        emailField : $('#contact-email'), 
        phoneField : $('#contact-phone') 
       }, 

       // run validation 
       run : function(formName) { 

        $(formName).on('submit', $.proxy(this.validateField, this)); 
       }, 

       validateField : function() { 
        for (var field in this.fields) { 
         if (this.fields.hasOwnProperty(field)) { 
          this.checkField(this.fields[field]); 
         } 
        } 

        $('#general-message-section').text('Form successfully sent, thank you!'); 
        return false; 
       }, 

       checkField : function(field) { 

        var messageBox = $(this.messageBox); 

        field.closest('li').find('.message').remove(); 

        if (field.hasClass('required')) { 
         if (!field.val()) { 
          messageBox.text('This field is empty!'); 
          field.closest('li').append(messageBox); 
          return false; 
         } 
        } 

        if (this.fields.emailField.val()) { 
         this.fields.emailField.closest('li').find('.message').remove(); 

         if (!this.fields.emailField.val().match(this.regEx.email)) { 
          messageBox.text('Only email format accepted!'); 
          this.fields.emailField.closest('li').append(messageBox); 
          return false; 
         } 
        } 

        if (this.fields.phoneField.val()) { 
         this.fields.phoneField.closest('li').find('.message').remove(); 

         if (!this.fields.phoneField.val().match(this.regEx.numbers)) { 
          messageBox.text('Only numbers are accepted!'); 
          this.fields.phoneField.closest('li').append(messageBox); 
          return false; 
         } 
        } 
       }, 

       regEx : { 
        email : /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/, 
        numbers : /^[0-9]+$/ 
       } 
      } 
     }; 

     return Namespace; 

    }(Namespace || {})); 

    // make global 
    window.Namespace = Namespace; 

}(window, jQuery)); 

// run it... 
Namespace.run(); 

HTML：

<p id="general-message-section"></p> 
<form id="contact-form" method="post" action="#"> 
    <fieldset> 

     <ul> 
      <li> 
       <label for="contact-name">Contact name *:</label> 
       <input type="text" id="contact-name" tabindex="1" class="required" autofocus /> 
      </li> 
      <li> 
       <label for="contact-email">Contact email address *:</label> 
       <input type="text" id="contact-email" tabindex="2" class="required" /> 
      </li> 
      <li> 
       <label for="contact-phone">Contact phone number:</label> 
       <input type="text" id="contact-phone" tabindex="3" /> 
      </li> 
      <li> 
       <input type="submit" id="submit-btn" tabindex="4" value="Submit" /> 
      </li> 
     </ul> 
    </fieldset> 
</form> 

非常感谢

Answer 1

这将检查所有必填字段，并设置valid为false，如果任何checkField()返回false，但不会打破For循环，它会检查是否有效是在循环后假，并打破：

 validateField : function() { 
      var valid = true; 
      for (var field in this.fields) { 
       if (this.fields.hasOwnProperty(field)) { 
        if(this.checkField(this.fields[field]) === false) valid = false; 
       } 
      } 
      if(!valid) return false; 

      $('#general-message-section').text('Form successfully sent, thank you!'); 
     } 

jsfiddle

Answer 2

我猜你缺少你的验证逻辑检查。您的代码：

validateField : function() { 
    for (var field in this.fields) { 
     if (this.fields.hasOwnProperty(field)) { 
      this.checkField(this.fields[field]); 
     } 
    } 

    $('#general-message-section').text('Form successfully sent, thank you!'); 
    return false; 
}, 

不会调用checkField，但不检查其结果（可以是假的）。我猜你会碰到这样的：

validateField : function() { 
    for (var field in this.fields) { 
     if (this.fields.hasOwnProperty(field)) { 
      if(!this.checkField(this.fields[field])) { 
       alert("There are errors!"); 
       return false; 
      } 
     } 
    } 

    $('#general-message-section').text('Form successfully sent, thank you!'); 
    return false; 
}, 

当然return true;在checkField，如果它是正确的（末），否则将不能工作。