jquery/html : Validating every button of html form using jquery

Question

I have a login form that needs to be validated . It has a couple of buttons . I need to validate my form in such a way that if the user forgets values in the button then i flag an error . However on success i move to a new page to continue work . i have the following but validation is not happening .

JQ :

 <script type="text/javascript">
        $(function() {

            $('#txtEmpid').click(
                    {
                        rules: {
                            txtEmpid: {
                                required: true
                            }
                        },
                        errorPlacement: function(error, element) {
                            element.css('background', '#ffdddd');
                        }
                    });
                    $('#txtPassword').click(
                    {
                        rules: {
                            txtPassword: {
                                required: true
                            }
                        },
                        errorPlacement: function(error, element) {
                            element.css('background', '#ffdddd');
                        }
                    });
        });
    </script>

HTML form ( index.html):

  <FORM NAME="frmLogin" ACTION="Login.jsp" METHOD="post" >
        <fieldset>
            <div class="text-center">
                <label class="text-center" for="txtEmpid">Employee Id </label>
                <div class="text-center">
                    <input type="text" id="txtEmpid" name ="txtEmpid" placeholder="Employee Id">
                </div>
            </div>
            <div class="text-center">
                <label class="text-center" for="txtPassword">Password</label>
                <div class="text-center">
                    <input type="password" id="txtPassword" name ="txtPassword" placeholder="Password">
                </div>
            </div>
            <div class="text-center">
                <div class="text-center">
                    <button type="submit" class="btn btn-primary">Sign in</button>
                </div>
            </div>
        </FIELDSET>

The above it not working . I am sure my jquery plugins are correct as i am able to do a validation for the entire submit form by using .validate jquery method .

I want to do validate every button . If values are ok then i move to new page (Login.jsp) else i stay on index.html and flag the problem . How do i do it ? Whats my mistake ?

no no man ! the form displays just fine :-) just that my buttons are not validated . if i input values correctly it goes to Login.jsp just fine . I think is a problem with basic sytax/rules . So help me out in that regard . I think i am making a dumb mistake . — rockstar
– rockstar, Commented Mar 20, 2013 at 11:11
rules and errorPlacement are options/methods only for the jQuery Validate plugin and must be placed inside .validate()... they can't be arbitrarily placed inside of a .click() handler or anyplace else outside of .validate(). — Sparky
– Sparky, Commented Mar 20, 2013 at 16:13
@Sparky Thanks for pointing it out . Yes i am using the .validate() function and do realise that these cant be placed inside a .click() function . By the way the above is incorrect code . I have accepted the correct answer . — rockstar
– rockstar, Commented Mar 20, 2013 at 17:27

Dipesh Parmar · Accepted Answer · 2013-03-20 11:26:28Z

You need to user .validate.

Give form a unique ID.

`Demo`

HTML

<FORM NAME="frmLogin" ACTION="Login.jsp" METHOD="post" id="FormID">
    <fieldset>
        <div class="text-center">
            <label class="text-center" for="txtEmpid">Employee Id </label>
            <div class="text-center">
                <input type="text" id="txtEmpid" name ="txtEmpid" placeholder="Employee Id">
            </div>
        </div>
        <div class="text-center">
            <label class="text-center" for="txtPassword">Password</label>
            <div class="text-center">
                <input type="password" id="txtPassword" name ="txtPassword" placeholder="Password">
            </div>
        </div>
        <div class="text-center">
            <div class="text-center">
                <button type="submit" class="btn btn-primary">Sign in</button>
            </div>
        </div>
    </FIELDSET>
</form>

jQuery

<script type="text/javascript">
    $(function()
    {
        $('#FormID').validate(
        {
            rules: {
                txtEmpid: {
                    required: true
                },
                txtPassword: {
                    required: true
                }
            },
            errorPlacement: function(error, element) {
                element.css('background', '#ffdddd');
            }
        });
    });
</script>

PSR · Accepted Answer · 2013-03-20 11:28:32Z

1

You applied rules if user clicks only.If user dont clicks on any text box those will not apply.

<FORM NAME="frmLogin" ACTION="Login.jsp" METHOD="post" id="formId">

and call a function on onsubmit

function submitFunction()
{

return  $('#formId').valid();

}

or

you can use simply

           <input type="text" id="txtEmpid" name ="txtEmpid" class="required" 
           placeholder="Employee Id">

                <input type="password" id="txtPassword" class="required"  
                name ="txtPassword" placeholder="Password">

edited Mar 20, 2013 at 11:28

answered Mar 20, 2013 at 11:21

PSR

40.4k43 gold badges115 silver badges154 bronze badges

2 Comments

rockstar Over a year ago

Ok i realise that problem . so when i change .click to .validate it still doest work :(

PSR Over a year ago

@rockstar if you have any other problem please create a alink

tamilmani · Accepted Answer · 2013-03-20 11:45:04Z

1

if u r jquery plugin is correct mean this code ll help you...

<script type="text/javascript">
        $(function() {

            $('#formID').validate(
                    {
                        rules: {
                            txtEmpid: {
                                required: true
                            }
                        },
                        errorPlacement: function(error, element) {
                            element.css('background', '#ffdddd');
                        }
                    });

        });
    </script>

edited Mar 20, 2013 at 11:45

answered Mar 20, 2013 at 11:18

tamilmani

5911 gold badge6 silver badges14 bronze badges

2 Comments

rockstar Over a year ago

I am sure about my plugins as form validation worked fine . But changing .click() to .validate() also does not work :( Hmmm

rockstar Over a year ago

Got it now ! thaks for ur support !

Collectives™ on Stack Overflow

jquery/html : Validating every button of html form using jquery

3 Answers 3

`Demo`

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related