表单验证

<form action="" method="post"> 
    Firstname : <input type="text" placeholder="first name" class="fname" name="fname" /> 
    <span class="err1"></span><br> 
    Lastname : <input type="text" placeholder="last name" class="lname" name="lname" /> 
    <span class="err2"></span><br> 
    <input type="submit" class="submit_form" value="Submit" /> 
</form>

jQuery的：

(function(){ 
      $('.submit_form').click(function() {     
        var fail = validate_firstname() 
         fail += validate_lastname(); 

        if(fail == "") { 
         return true; 
        } else {       
         return false; 
        }    
      }); 

      function validate_firstname(){ 
       var fname = $('.fname').val(); 
       if(fname.length == 0) { 
        $('.err1').text("required"); 
       } else if(fname.length < 5) { 
        $('.err1').text("Minimum 5 letter"); 
       } 
      } 

      function validate_lastname(){ 
       var lname = $('.fname').val(); 
       if(lname.length == 0) { 
        $('.err2').text("required"); 
       } else if(lname.length < 5) { 
        $('.err2').text("Minimum 5 letter"); 
       } 
      } 
     })(jQuery);

现在，当我提交形式没有输入字段的任何事情。它显示必需为两个字段。但如果我离开名字空白并输入一些文字姓氏说'aaa'，然后提交。它再次给出了两个字段的相同错误要求。但它应该显示需要为名和最小5个字母为姓氏。我如何显示每个字段的正确错误。请帮忙。

来源

2017-02-10 Sam

姓验证替换下面一行写错误的类名

var lname = $('.lname').val();

来源

2017-02-10 11:10:57

错字的错误 - 你在这两种情况下使用$('.fname').val()。

(function() { 
 
    $('.submit_form').click(function() { 
 
    var fail = validate_firstname() 
 
    fail += validate_lastname(); 
 

 
    if (fail == "") { 
 
     return true; 
 
    } else { 
 
     return false; 
 
    } 
 
    }); 
 

 
    function validate_firstname() { 
 
    var fname = $('.fname').val(); 
 
    if (fname.length == 0) { 
 
     $('.err1').text("required"); 
 
    } else if (fname.length < 5) { 
 
     $('.err1').text("Minimum 5 letter"); 
 
    } 
 
    } 
 

 
    function validate_lastname() { 
 
    var lname = $('.lname').val(); 
 
    if (lname.length == 0) { 
 
     $('.err2').text("required"); 
 
    } else if (lname.length < 5) { 
 
     $('.err2').text("Minimum 5 letter"); 
 
    } 
 
    } 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" method="post"> 
 
    Firstname : 
 
    <input type="text" placeholder="first name" class="fname" name="fname" /> 
 
    <span class="err1"></span> 
 
    <br>Lastname : 
 
    <input type="text" placeholder="last name" class="lname" name="lname" /> 
 
    <span class="err2"></span> 
 
    <br> 
 
    <input type="submit" class="submit_form" value="Submit" /> 
 
</form>

来源

2017-02-10 11:11:38

你打错了请检查该行并再次更改。

var lname = $('.lname').val();

来源

2017-02-10 11:15:54

表单验证显示所有字段的相同错误消息

表单验证

回答

相关问题