CODEWITHSUNDEEP
jqueryjquery-validate
Skeeve
Skeeve

Reputation: 1255

JQuery Validation event setting

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.

Upvotes: 2

Views: 11172

Answers (4)

Lagumesh V
Lagumesh V

Reputation: 1

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

Upvotes: 0

Sparky
Sparky

Reputation: 98738

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.

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 1

sourcecode
sourcecode

Reputation: 1802

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

Upvotes: 1

Related Questions