jquery form validation doesn't work fine

Question

I created a small jQuery form validation for my page but I don't know where the problem is that does work.

I use event.preventDefault(); to stop submiting form if the the fields was empty and #phone wasn't numeric.

but numeric alert doesn't work, too.! :(

here is my jQuery code:

$(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();
    });

});

and here is my HTML code that I use:

<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>

Looks like you are getting all crazy with checking which keys and what not. Why don't you just check to see if it is a number when the user hits submit? — pizzarob
– pizzarob, Commented Mar 5, 2014 at 5:21

Andolasoft Inc · Accepted Answer · 2014-03-05 05:19:24Z

I would suggest to use the jquery validate functionality, which is very easy and useful.

Here is my code :

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

});

Collectives™ on Stack Overflow

jquery form validation doesn't work fine

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related