jQuery表单验证无法正常工作

debugcn 发表于 Dev

莫森·拉苏利（Mohsen Rasouli）

我为页面创建了一个小的jQuery表单验证，但是我不知道问题出在哪里。

event.preventDefault();如果这些字段为空并且#phone不是数字，我通常会停止提交表单。

但是数字警报也不起作用。:(

这是我的jQuery代码：

$(document).ready(function(){

    $( "#form" ).submit(function(e) {
        var f_name = $('#f_name').val();
        var l_name = $('#l_name').val();
        var phone = $('#phone').val();



        if(f_name == '') {
            alert('First Name feild is empty!');
            var tf_name = false;
        } else {
            var tf_name = true;
        }
        if(l_name == '') {
            alert('Last Name feild is empty!');
            var tl_name = false;
        } else {
            var tl_name = true;
        }

        if(phone == '') {
            alert('Phone feild is empty!');
            var tphone = false;
        } 
        if(phone) {
            $("#phone").keydown(function (e) {
                // Allow: backspace, delete, tab, escape, enter and .
                if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
                     // Allow: Ctrl+A
                    (e.keyCode == 65 && e.ctrlKey === true) || 
                     // Allow: home, end, left, right
                    (e.keyCode >= 35 && e.keyCode <= 39)) {
                         // let it happen, don't do anything
                         var tphone = true;
                         alert("You jast allow to use numbers!")
                         return;
                }
                // Ensure that it is a number and stop the keypress
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                }
            });
        }

        e.preventDefault();
    });

});

这是我使用的HTML代码：

<form action="userC.php" method="post" id="form">
    <p>First Name: <input type="text" name="f_name" id="f_name" /></p>
    <p>Last Name: <input type="text" name="l_name" id="l_name" /></p>
    <p>Phone Number: <input type="text" name="phone" id="phone" /></p>
    <p><input type="submit" name="submit" /></p>
</form>

AndolaSoft Inc

我建议使用jQuery验证功能，该功能非常简单实用。

这是我的代码：

function FormValidate() {   
validator=$("#form").validate({
    rules: {
        "f_name":{
        required:true,
        minlength: 3
        },              
        "l_name":{
        required:true,
        minlength: 3
        },
        "phone":{
        required:true,
        number: true
        }
    },  
    messages: {
        "f_name":{
        required: "First name is required."
        },
        "l_name":{
        required: "Last name is required."
        },
        "phone":{
        required:"Phone is required.",
        number: "Please provide a valid phone number."
        }       
    }
    });
    x=validator.form();
    return x;
}

$(document).ready(function(){
   $( "#form" ).submit(function(e) {
    var chk = FormValidate();
if(!chk){
    return false;
}
 });

});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。