表单验证

Question

Html：下面是一个简单的表单有2个字段firstname和lastname。

表单验证

<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个字母作为姓氏。如何为每个字段显示正确的错误。请帮忙。

Answer 1

Lastname验证替换下面的行写错了类名

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

Answer 2

你有一个打字错误请检查此行并再次更改。

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

Answer 3

错字错误 - 您在两种情况下都使用了$('.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>

表单验证显示所有字段

表单验证

3 个答案: