jQuery 表单验证不起作用答案

【问题标题】：jQuery form validation doesn't workjQuery 表单验证不起作用
【发布时间】：2013-11-03 02:56:52
【问题描述】：

我正在做一个简单的表单验证，它简单地检查是否填写了高度字段。我已经仔细检查了我的代码中的所有内容，但我找不到它为什么不起作用。

我的 HTML：

<form id="configuration" action="">

   <div class="con_near">
      <label for="height">height: (mm)</label>
      <input id="form_height" name="height" maxlength="4" type="text" />
   </div><!--End con_near-->

   <input name="calculated" type="submit" class="submit" value="Calculate" />

</form>

我的 jQuery：

    <script>

    $(document).ready(function(){  

    // Form validation
    var configForm = $("#configuration");
    var height = $("#form_height");

    // On blur
    height.blur(validateHeight);

    // On keyup
    height.keyup(validateHeight);

    configForm.submit(function(){
        if(validateHeight())
            return true;

        else
            return false;

    });         

    function validateHeight() {
        if(height.val().length() < 4) {
            height.addClass("red_border");  
            return false;
        }
        else{
            height.removeClass("red_border");
            return true;    
        }
    }

    });

       </script>

【问题讨论】：

标签： jquery forms validation

【解决方案1】：

试试这样的

$(document).ready(function(){

    // Form validation
    var configForm = $("#configuration");
    var height = $("#form_height");

    // On blur
    height.blur(validateHeight);

    // On keyup
    height.keyup(validateHeight);

    configForm.submit(function(){
        return validateHeight();
    });

    function validateHeight() {
        if(height.val().length < 4) {
            height.addClass("red_border");
            return false;
        }
        else{
            height.removeClass("red_border");
            return true;
        }
    }

});

【讨论】：

【解决方案2】：

提交事件不会通过返回 false 来停止，您需要使用 preventDefault() 来停止事件尝试此代码

configForm.submit(function(e){
    if(!validateHeight())
        e.preventDefault();
});         

function validateHeight() {
    if(height.val().length < 4) { // <- here you also made a mistake in length its a property not a function
        height.addClass("red_border");  
        return false;
    }
    height.removeClass("red_border");
    return true;
}

【讨论】：

【解决方案3】：

使用length 代替length() 喜欢，

if(height.val().length < 4) {

代替

if(height.val().length() < 4) {

function validateHeight(height) {
    if(height.val().length < 4) {
    .....

Demo

【讨论】：

【解决方案4】：

问题出在.length()

使用

if(height.val().length < 4) {

而不是

if(height.val().length() < 4) {

【讨论】：

【解决方案5】：

长度不是函数而是属性

试试

configForm.submit(function(){
    if(validateHeight(height))
        return true;

    else
        return false;

});     
function validateHeight(height) {
    if(height.val().length < 4) {
        height.addClass("red_border");  
        return false;
    }
    else{
        height.removeClass("red_border");
        return true;    
    }
}

【讨论】：