Question

我在用户提交表单时编写了jquery验证代码。我的代码中有一些问题

问题：

如果name字段为null.it显示错误消息。如果用户在textfield中输入值，也会显示错误消息。
我还想知道如何验证该字段？如果我的代码中的所有文本字段都为空。（如果条件放在哪里）。那么表单必须去action.php。
指导我是否还有更好的方法。

这是html表单：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery Validation</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/thk.js.js" type="text/javascript"></script>
</head>

<body>
<form name="jsqval" action="action.php" method="post">
    <table width="56%" border="1" cellspacing="0" cellpadding="10" align="center">

  <tr>
    <td>Name:<input type="text" name="usernmae" value="" id="name" /><br><span id="names" style="color:#F00;"></span></td>
  </tr>
  <tr>
    <td>E-Mail Id:<input type="text" name="email" value="" id="email" /><br><span id="emails" style="color:#F00;"></span></td>
  </tr>
  <tr>
    <td>Country Code:
        <select name="cuntry" id="ctry">
        <option value="">----country code----</option>
        <option value="1">Ind(+91)</option>
        <option value="2">AUS(+88)</option>
        <option value="3">RSA(+77)</option>
        <option value="4">ENG(+66)</option>
        </select>
        <span id="countrys" style="color:#F00;"></span>
        &nbsp;
        <input type="text" name="phone" value="" id="phon" /><span id="phones" style="color:#F00;"></span>
    </td>
  </tr>
  <tr>
    <td>Tuition:<input type="text" name="tuition" value="" id="tuition" /><span id="tuitions" style="color:#F00;"></span></td>
  </tr>
  <tr>
    <td>Class Location:<br>
        <input type="checkbox" name="myhome"  value="My Home">My Home
        <input type="checkbox" name="TutorHome"  value="Tutor's Home">Tutor's Home
        <input type="checkbox" name="institute"  value="Institute or Coaching Center">Institute or Coaching Center
        <input type="checkbox" name="online"  value="Online Class">Online Class
        <span id="check" style="color:#F00;"></span></td>
  </tr>
  <tr>
    <td>Pincode: <input type="text" name="tuition" value="" id="tuition" /><span id="tuitions" style="color:#F00;"></span></td>
  </tr>
  <tr>
    <td><input type="submit" value="submit" id="submit"></td>
  </tr>
</table>
</form>
</body>
</html>

我的jquery代码：

$(document).ready(function() {
    $('#submit').click(function() {
        a=$('#name');
        if(a.val()=='')
        {
            $('#names').html("Please Enter Your Name");
            a.focus();
            return false;
        } 

        b=$('#email');
        if(b.val()=='')
        {
            $('#emails').html('Please enter your e-mail Address');
            b.focus();
            return false;
        } 

        resg=$('#ctry');
        if(resg.val()=='')
        {
            $('#countrys').html("Please Select your country name");
            resg.focus();
            return false;
        }
        d=$('#phon')
        if(d.val()=='')
        {
            $('#phones').html("Please Enter your phone number");
            d.focus();
            return false;
        }
        asd=$('#tuition');
        if(asd.val()=='')
        {
            $('#tuitions').html("Please Enter your tuition");
            asd.focus();
            return false;   
        }

         y = false;
             $('input[type="checkbox"]').each(function() {
                 if (this.checked) 
                 {
                 y = true;
                 }

                if (y==false) 
                {
                  $('#check').html("Please Check me");

                }
                return false;
             });


    });

});

Answer 1

我更喜欢使用像1这样的现有脚本来验证浏览器级别的表单。有很多可用的，用jquery编写。希望这会有所帮助。

Reference

当用户提交表单时，我的代码表单验证中的问题

1 个答案: