CODEWITHSUNDEEP
jqueryjquery-validatejquery-select2
Stfvns
Stfvns

Reputation: 1041

Form reset using jQuery Validate plugin with Select2?

I am using jQuery Validate to validate my form. And inside form have tag select, my select using select2 jQuery. I have problem when I clear my from it's make my select2 change required field. How to using validate with select2 work fine?

My Code:

$(document).ready(function () {
//validate form
$(".form_required").validate({
    highlight: function (element, errorClass, validClass) {
        $(element).parents('.form-control').removeClass('has-success').addClass('has-error');     
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).parents('.form-control').removeClass('has-error').addClass('has-success');
    },
    errorPlacement: function (error, element) {
        if (element.hasClass('select2') && element.next('.select2-container').length) {
            error.insertAfter(element.next('.select2-container'));
        } else {
            error.insertAfter(element);
        }
    }
});

$('.select2').select2({
    allowClear: true,
    placeholder: ""
}).on("change", function (e) {
    $(this).valid();
});
});

function clear(){
   $("#myformHeader select").val('').trigger('change');
}

My HTML:

<form name="myformHeader" id="myformHeader" class="form-horizontal form_required">
    <select type="text" name="ddl" id="ddl" class="form-control select2" required>
       <!-- many option -->
    </select>
    <select type="text" name="ddl2" id="ddl2" class="form-control select2" required>
       <!-- many option -->
    </select>
    <button  type="button" onclick="clear()">Reset</button>
</form>

When click button reset show required like this. I don't want to show this for clear enter image description here

Upvotes: 0

Views: 1546

Answers (2)

Sparky
Sparky

Reputation: 98748

Your problem has nothing to do with Select2 as you'd have the same issue without it. Triggering .valid() on a required field does not clear out the validation messages... it only reaffirms them.

To clear the form of errors, then you need to use the plugin's .resetForm() method:

$("#myformHeader").validate().resetForm()

Then to clear the form data, use the JavaScript .reset() method:

document.getElementById("myformHeader").reset();

or

$("#myformHeader")[0].reset();

The button:

<button type="button" id="reset">Reset</button>

The jQuery:

$('#reset').on('click', function () {
    var form = $("#myformHeader");
    form.validate().resetForm();   // clear out the validation errors
    form[0].reset();               // clear out the form data
});

Upvotes: 2

Ben Bezac
Ben Bezac

Reputation: 14

If you want to your select2 to be optional just remove its required attribute ;)

Otherwise, if you want to have a value or empty this should do the trick ;

Before doing .validate()

$.validator.addMethod("atLeastOneElement", (value, element, options) => {
 // check whatever you need and return boolean (true = valid)
});

Then add this to the validate({})

rules: {
    ddl: {
        atLeastOneElement: true
    }
}

dll is the name of your select not the id btw ( in your case the name and the id are the same )

Upvotes: -1

Related Questions