Question

当用户提交表单时，我的代码中的表单验证问题 1.在验证文本字段之后。还显示错误信息。 2.我还想知道如何验证所有字段是否为空？

<!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>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><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;
        } 


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

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

                }
                return false;
             });



    });

});

Answer 1

验证字段后，请不要忘记重置错误字段。

如：

$('#names').html("Please Enter Your Name");

DEMO

Answer 2

当用户更新文本框中的数据时，请尝试使用此更新验证消息：$('#name').keyup(function(){ if($(this).val() !=''){ $('#names').html(''); } else{$('#names').html('Error for User to act.')} })

Answer 3

试试这个

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>
    <style type="text/css">
            .Errorvalidate{
                color:#C3040B;
                border:1px solid #FFADA6;
            }
    </style>
    </head>

    <body>
    <form name="jsqval" action="action.php" method="post" id="frm">
        <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 id="check">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><input type="button" value="submit" id="submit"></td>
      </tr>
    </table>
    </form>
    </body>
    </html>

jQuery：

function validate(element, mode) {
    var val = element.val();
    switch(mode) {

        case 'empty':
            if($.trim(val) == '') {
                var msg = 'Please fill up this part';
                showError(element, msg);
                return false;
            }
            return true;
            break;
        case 'email':
            filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if(($.trim(val) == '') || !(filter.test(val))) {
                var msg = 'Enter your email correctly';
                showError(element, msg);
                return false;
            }
            return true;
            break;
        case 'checkbox':
            if(element.find("input[type=checkbox]:checked").length < 1) {
                var msg = 'Please check me';
                showError(element, msg);
                return false;
            }
            return true;
            break;  
    }
}
function showError(element, msg) {
    element.removeClass("Errorvalidate");
    element.addClass("Errorvalidate");
    element.after("<div class='Errorvalidate'>"+msg+"</div>");
    element.focus();
    return false;
}
$("*").change(function() {
        $(this).removeClass("Errorvalidate");
});

验证您的表单：

$('#submit').click(function () {
    if((validate($('#name'), 'empty'))===true && (validate($('#email'), 'email'))===true && (validate($('#check'), 'checkbox'))===true) {
            $("form#frm").submit();
    }
}

当用户提交表单时，我的代码中的用户注册表单验证出错

3 个答案:

试试这个