CODEWITHSUNDEEP
jqueryjquery-validate
Norman
Norman

Reputation: 6365

jquery validation plugin will not work if I change input type=submit to type=button

I use the jquery validation plugin that I found here

My problem is, in the form, if I change the submit button from

<input type="submit" value="Add" class="add" id="addbutton">

to

<input type="button" value="Add" class="add" id="addbutton">

the form will not validate or work.

I'd like to use button instead of submit, because if a user has javascript turned off, the form will not submit at all. It'll simply sit there doing nothing.

Any idea how to solve this and make it work when type="button"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>jQuery validation plug-in - main demo</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />

<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">
$.validator.setDefaults({
    submitHandler: function() { form.submit(); }
});

$().ready(function() {

    // validate signup form on keyup and submit
    $("#signupForm").validate({


        rules: {
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },

        },
        messages: {

            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 2 characters"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long",
                equalTo: "Please enter the same password as above"
            },
            email: "Please enter a valid email address",
            agree: "Please accept our policy"
        }
    });




});
</script>

<style type="text/css">
#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
    margin-left: 0px;
    width: auto;
    display: inline;
}
#newsletter_topics label.error {
    display: none;
    margin-left: 103px;
}
</style>

</head>
<body>

<div id="main">

<p>Default submitHandler is set to display an alert into of submitting the form</p>

<form class="cmxform" id="signupForm" method="post" action="">
    <fieldset>
        <legend>Validating a complete form</legend>

        <p>

            <label for="username">Username</label>
            <input id="username" name="username" />
            <label for="username"></label>

        </p>
        <p>
            <label for="password">Password</label>
            <input id="password" name="password" type="password" />
        </p>
        <p>
            <label for="confirm_password">Confirm password</label>
            <input id="confirm_password" name="confirm_password" type="password" />
        </p>
        <p>
            <label for="email">Email</label>
            <input id="email" name="email" type="email" />
        </p>


        <p>
            <input class="submit" type="submit" value="Submit"/>
        </p>
    </fieldset>
</form>

</div>
</body>
</html>

Upvotes: 3

Views: 2306

Answers (2)

Sibu
Sibu

Reputation: 4617

You can try this way

    $('document').ready(function(){
    $('form').validate({
        rules: {
           a: {required:true, minlength:2}
        },      
        messages: {
           a: {required: "enter your name!"}       
        },


    });
    $('#checkbut').click(function(){
        $("form").validate().element("#a");
    });
});

Working Demo

Upvotes: 0

weexpectedTHIS
weexpectedTHIS

Reputation: 3376

I believe the validation plugin actually does validation on submit of the form. Therefor you just need to use javascript to make any clicks to the button submit the form. Something like this:

$('#commentForm input[type=button]').click(function(){
  $(this).closest('form').submit()
});

Additional: You also need to keep in mind that hitting enter while focused on any form element will still submit the form unless you disable that, so your solution of just removing the submit button when javascript is disabled will not cover that case.

Upvotes: 4

Related Questions