jquery - Call javascript function on submit form

I am trying to call JavaScript function while submitting the form.

Here is code but while submitting function not called, please suggest something and I want to show error messages using javascript method as well , how can I show error messages in validation using JavaScript.

<form id="register" name="register"  onsubmit="validateForm()">
<label for="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password"><br><br>
<label for="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>

<label for="email"> Email </label><br>
<input type="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit">Submit</button>

</form>
<script type="text/javascript" src=".5.2/jquery.min.js"></script>
 <script type="text/javascript" src=".validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#register").validate({
        rules: {
            "Username": {
                required: true,
            },
            "Password": {
                required: true,
                minlength: 5
            },
            "Confirm-Password": {
                required: true,
            },
            "email": {
                required: true,
            }
        }
    });
});
</script>

and here is JavaScript code

function validateForm()
{
    var password = document.forms["register"]["Password"].value;
    var con-password = document.forms["register"]["Confirm-Password"].value;
    if(password != con-password)
    {
        document.getElementById('password-error').style.visibility='visible';
        alert("not matched");
    }
    alert("matched");
}

I am trying to call JavaScript function while submitting the form.

<form id="register" name="register"  onsubmit="validateForm()">
<label for="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password"><br><br>
<label for="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>

<label for="email"> Email </label><br>
<input type="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit">Submit</button>

</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#register").validate({
        rules: {
            "Username": {
                required: true,
            },
            "Password": {
                required: true,
                minlength: 5
            },
            "Confirm-Password": {
                required: true,
            },
            "email": {
                required: true,
            }
        }
    });
});
</script>

and here is JavaScript code

function validateForm()
{
    var password = document.forms["register"]["Password"].value;
    var con-password = document.forms["register"]["Confirm-Password"].value;
    if(password != con-password)
    {
        document.getElementById('password-error').style.visibility='visible';
        alert("not matched");
    }
    alert("matched");
}

Share Improve this question edited Jan 21, 2014 at 17:35 Sparky 98.7k26 gold badges202 silver badges290 bronze badges asked Jan 21, 2014 at 10:30 chandan111 2512 gold badges6 silver badges16 bronze badges

onsubmit="validateForm()" replace with onsubmit="return validateForm()". try this – krutssss Commented Jan 21, 2014 at 10:32
@kruti i already tried not working. – chandan111 Commented Jan 21, 2014 at 10:33
can anybody please share working code like on jsfiddle – chandan111 Commented Jan 21, 2014 at 10:34

Add a comment |

6 Answers 6

Sorted by: Reset to default 5

This is probably due to a syntax error in your script. When you see errors like that, look into the JavaScript console of your browser.

In this case, con-password is not a valid variable name. What JavaScript sees is:

var con - password ...

i.e. the code says "substract password from con". Try an underscore instead:

var con_password ...

Do not need to do anything extra for password matching, just add equalTo: "#Password" to it as shown in the below example:

$(document).ready(function () {
    $("#register").validate({
        rules: {
            "Username": {
                required: true,
            },
            "Password": {
                required: true,
                minlength: 5
            },
            "Confirm-Password": {
                required: true,
                equalTo: "#Password"
            },
            "email": {
                required: true,
            }
        },
       messages: {
         Password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                    },
         Confirm-Password: {
                    required: "Please provide a confirm password",
                    equalTo: "Please enter the same password as above"
                    }
        },
        submitHandler: function(form) { 
            // Your function call  
            return false; // return true will submit form
            }
    });
});

Working example:

<form id="register" name="register" action="" method="post">
<label for="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password"><br><br>
<label for="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm_Password" name="Confirm_Password" placeholder="Confirm Password" ><br><br>

<label for="email"> Email </label><br>
<input type="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit">Submit</button>

</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#register").validate({
        rules: {
            "Username": {
                required: true,
            },
            "Password": {
                required: true,
                minlength: 5
            },
            "Confirm_Password": {
                required: true,
                equalTo: "#Password"
            },
            "email": {
                required: true,
            }
        },
       messages: {
         Password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                    },
         Confirm_Password: {
                    required: "Please provide a confirm password",
                    equalTo: "Please enter the same password as above"
                    }
        },
        submitHandler: function(form) { 
            // Your function call  
            return false; // return true will submit form
            }
    });
});
</script>

Maybe instead of checking if passwords matches you can add new rule in validation? something like:

           ... "Password": {
            required: true,
            minlength: 5
        },
        "Confirm-Password": {
            required: true,
            equalTo: "#Password"} ....

and for messages add:

... messages: {
           "Password": "Your message",

        }...

and all in all something like this: `

$(document).ready(function () {
$("Your form name").validate({
    rules: {
        "Username": {
            required: true,
        },
        "Password": {
            required: true,
            minlength: 5
        },
        "Confirm-Password": {
            required: true,
            equalTo: "#Password"
        },
        "email": {
            required: true,
            email: true
        }
    }
        messages: {
            "Password": "Your message",
            "email": "Your Message",
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
});`

try this. i add onclick event on the submit button to call the function validateForm()

html

<form id="register" name="register">
<label for ="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for ="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password" ><br><br>
<label for ="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>

<label for="email" > Email </label><br>
<input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit" onclick="validateForm()">Submit</button>

</form>

this is the validateForm()

<script type="text/javascript">
    function validateForm() {
        var username = $('#Username'),
            password = $('#Password'),
            confirm  = $('#Confirm-Password'),
            email    = $('#email');

        $('#register').submit(function(ev){
            // check if all fields is not empty
            if(username.val() === '' || password.val() === '' || confirm.val() === '' || email.val() === '') {
                ev.preventDefault(); // prevent form submit
                alert('All fields are required.'); //alert message
                //check if password and confirm password is equal
            } else if(password.val() != confirm.val()){
                ev.preventDefault(); // prevent form submit
                alert('password did not match.'); //alert message
            } else {
                return true; // submit form if validation has passed.
            }
        });
    }
</script>

May be you missed - you need to use method="post" in

http://jsfiddle.net/dLbLS/

    <form id="register" name="register"  method="post" onsubmit="validateForm();" >
    <label for ="Username"> Username </label><br>
  <input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
  <label for ="Password"> Password </label><br>
 <input type="password" class="register-control" id="Password" name="Password"  placeholder="Enter Password" ><br><br>
  <label for ="Confirm-Password"> Confirm Password </label><br>
  <input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>

  <label for="email" > Email </label><br>
  <input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
 <button type="submit" >Submit</button>

 </form>

Use this code

    <input type="button" id="close" value="Submit" onClick="window.location = 'validateForm()'">

do one thing i am sending one link please go through that link i have commented my code over there copy and paste it and test it....

How to do validation in JQuery dialog box?

if this answer is correct then please mark it as answer for others....

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - Call javascript function on submit form - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)