Call javascript function on submit form

Question

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

onsubmit="validateForm()" replace with onsubmit="return validateForm()". try this — krutssss
– krutssss, Commented Jan 21, 2014 at 10:32

Aaron Digulla · Accepted Answer · 2014-01-21 10:33:47Z

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

answered Jan 21, 2014 at 10:33

Aaron Digulla

330k111 gold badges626 silver badges840 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

chandan111 Over a year ago

thanks learan a new thing ,added but still fuction didn't work.

chandan111 Over a year ago

event returnValue is deprecated. Please use the standard event.preventDefault() instead.

Sparky Over a year ago

-1 for not also showing the OP that his validateForm() function is completely superfluous, and that the jQuery Validate plugin has a submitHandler built into it.

Anubhav · Accepted Answer · 2014-01-21 11:13:44Z

5

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>

edited Jan 21, 2014 at 11:13

answered Jan 21, 2014 at 10:43

Anubhav

1,6234 gold badges18 silver badges32 bronze badges

6 Comments

chandan111 Over a year ago

thanks it works for me, but i want to use javascript as well .

szpic Over a year ago

as far as I know jQuery is JS ;)

Anubhav Over a year ago

You can use submitHandler: function(form) { /*your function call*/ return false; }

chandan111 Over a year ago

@Anubhav above trick work for me but it showing error messages in both condition when passwords are different and same .

Anubhav Over a year ago

Not possible, you are doing something wrong. see the documentation jqueryvalidation.org/validate. Note change hyphen(-) to underscore(_) in the names of input field!

|

szpic · Accepted Answer · 2014-01-21 10:59:15Z

3

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

edited Jan 21, 2014 at 10:59

answered Jan 21, 2014 at 10:44

szpic

4,50815 gold badges56 silver badges90 bronze badges

2 Comments

chandan111 Over a year ago

thanks can you please write messages part for Password and Email just for confirming the syntax.

szpic Over a year ago

added some. But could there my some spelling mistakes. Don't have possibility at this moment to check this.

Peace · Accepted Answer · 2014-01-21 11:09:34Z

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>

Spdexter · Accepted Answer · 2014-01-21 10:38:32Z

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>

Community · Accepted Answer · 2017-05-23 11:55:10Z

-2

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

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Jan 21, 2014 at 10:38

Partap

1811 silver badge9 bronze badges

Collectives™ on Stack Overflow

Call javascript function on submit form

6 Answers 6

3 Comments

6 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

6 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related