JQuery Validation event setting

Question

How can I set up my validator so it will check all fields on the form whenever changes the value of any input on this form. I've tried

$("#form-user-edit").validate({
        keypress : true
    });

but it's not working.

I've made a jsFiddle http://jsfiddle.net/NickBunich/pDrTF/1/

The problem is that when u type something in first input - other inputs become enabled, but if u then type something in second input, then erase it and then erase text in first input - error message and highlight will stay.

It is working fine here jsfiddle.net/arunpjohny/dCJc7 the validation rules are passed as attributes like minlength, required etc to the input fields — Arun P Johny
– Arun P Johny, Commented Jan 31, 2013 at 10:40
Looks like it has something to do with the disabled state of the controls — Arun P Johny
– Arun P Johny, Commented Jan 31, 2013 at 11:59
It's not working because there is no such option as keypress: within the .validate() plugin. Modify the onkeyup: callback option instead. — Sparky
– Sparky, Commented Jan 31, 2013 at 18:53

Sparky · Accepted Answer · 2013-02-09 07:29:47Z

3

The following answer demonstrates the proper usage of the built-in callback event functions of the plugin. The creation of external callback functions is superfluous and unnecessary.

Your code...

$("#form-user-edit").validate({
    keypress : true
});

You cannot simply "make-up" or "invent" .validate() options. keypress: does not exist. See this page for the only available options.

How can I set up my validator so it will check all fields on the form whenever changes the value of any input on this form.

There is already an option called onkeyup and it's turned on by default. (This checks only the active input on every key-up event.)

You could modify onkeyup to suit your needs. This will check the entire form on every key-up event.

$(document).ready(function() {
    $("#form-user-edit").validate({
        // other rules and options,
        onkeyup: function (element, event) {
            if (event.which === 9 && this.elementValue(element) === '') {
                return;
            } else if (element.name in this.submitted || element === this.lastActive) {
                if($("#form-user-edit").valid()) {
                    $("#form-user-edit .error").removeClass('error');
                };
            }
        }
    });
});

Working Demo: http://jsfiddle.net/CMT5r/

Working demo contains the OP's code modified to function as requested.

edited Feb 9, 2013 at 7:29

answered Jan 31, 2013 at 16:39

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

7 Comments

Arun P Johny Over a year ago

still not working, if you enter an text in the first text box -> this will enable and mark the next two fields as required, then clear the text in the first text box then the next two text boxes will be disabled but the red highlight box around the text boxes is not getting cleared.

Sparky Over a year ago

@ArunPJohny, thanks for pointing that out. I've fixed my answer so that it now functions as requested.

Sparky Over a year ago

@ArunPJohny, it's certainly not the same since mine is using the plugin's built-in onkeyup event handler... yours is an external change event handler running in parallel with the plugin's handler function.

Arun P Johny Over a year ago

you are right about the validation initialization portion, but about the error class not being there after valid() call you were wrong

Arun P Johny Over a year ago

yes, you are right about that, in terms of overhead your method will force the validation every time a key is pressed, isn't it?

|

sourcecode · Accepted Answer · 2013-01-31 11:05:19Z

1

As an Example ,you have to :

specify rules for check

 $("#form-user-edit").validate({
       rules: {
         name: "required",
         email: {
           required: true,
           email: true
         }
       },
       messages: {
         name: "Please specify your name",
         email: {
           required: "We need your email address to contact you",
           email: "Your email address must be in the format of [email protected]"
         }
       }
    })

this tutorial would give you vast explaination on the validations see here

answered Jan 31, 2013 at 11:05

sourcecode

1,8122 gold badges16 silver badges17 bronze badges

Comments

Sparky · Accepted Answer · 2013-02-09 07:00:36Z

1

You can add a change event handler to do this

$("#form-user-edit").on('change', ':input', function(){
    if($("#form-user-edit").valid()) {
        $("#form-user-edit .error").removeClass('error')
    }
})

Demo: Fiddler

edited Feb 9, 2013 at 7:00

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

answered Jan 31, 2013 at 12:08

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

3 Comments

Skeeve Over a year ago

that's better. but still there is a red highlighting around the inputs and font color stays red.

Arun P Johny Over a year ago

it is because those fields are disabled by the time the change event is fired, validator ignores fields that are :submit, :reset, :image, [disabled]

Sparky Over a year ago

It's very dirty since the plugin already has built-in event handlers for all of this.

gurkan · Accepted Answer · 2023-11-24 01:29:07Z

<!---------------------- Personal Details -------------------------->
<div class="inputchanges">
    <form>
        <fieldset id="personalDetailsForm">
            <div class="border rounded shadow">
                <div class="bg-primary text-white px-3 py-2 rounded-top">
                    <h3>Personal Details / ವೈಯಕ್ತಿಕ ವಿವರಗಳು</h3>
                </div>
                <div class="border rounded p-3">
                    <div class="form-group row">
                        <div class="col-sm-6">
                            <label for="name" class="col-form-label">
                                <div class="d-flex align-items-center">
                                    <div class="mr-2" style="align-self: self-start;">3.</div>
                                    <div>
                                        Candidate Full Name : <i class="invalid">*</i><br>
                                        <span class="av-font-kn">C¨sÀåyðAiÀÄ ¥ÀÆtð ºÉ¸ÀgÀÄ :</span>
                                    </div>
                                </div>
                            </label>
                            <input type="text" placeholder="Candidate Name / ಅರ್ಜಿದಾರರ ಹೆಸರು" id="name"
                                class="form-control" minlength="1" maxlength="60" pattern="[a-zA-Z\s]{1,60}" required>
                        </div>
                        <div class="col-sm-6">
                            <label for="fname" class="col-form-label">
                                <div class="d-flex align-items-center">
                                    <div class="mr-2" style="align-self: self-start;">4.</div>
                                    <div>
                                        Father's Name : <i class="invalid">*</i><br>
                                        <span class="av-font-kn">vÀAzÉAiÀÄ ºÉ¸ÀgÀÄ :</span>
                                    </div>
                                </div>
                            </label>
                            <input type="text" placeholder="Father's Name / ತಂದೆಯ ಹೆಸರು" id="fname" class="form-control"
                                minlength="1" maxlength="60" pattern="[a-zA-Z\s]{1,60}" required>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
    <!-- Button trigger modal -->
    <div class="modal-footer d-flex justify-content-between">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Edit</button>
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</div>

Collectives™ on Stack Overflow

JQuery Validation event setting

4 Answers 4

7 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related