CODEWITHSUNDEEP
jqueryjquery-validate
davidpauljunior
davidpauljunior

Reputation: 8338

jQuery Validate - validate but purposefully allow submission of the form

Is it possible using the jQuery Validation plugin to have the validation run but actually allow submission of the form?

The reason is that I'd like a 'save progress' button which will allow you to essentially submit bad data. The form ultimately will have multiple steps and at the last step I'll work out the validity of the form and will enable a 'submit' button (if all sections are valid). So the user will be presented with something like 'your progress has been saved but the form cannot be submitted until all required fields are complete'.

I wondered if you could do something with the submitHandler but I'm really not sure where to start with it.

EDIT - Update following Sparky's initial answer

Following @Sparky's initial answer, I've started working on using the button type="button" to control the submission of the form even if it's not valid, and then the default button type="submit" to submit the form if it is valid.

My logic is attempting to say, when you click the save button if the form is not valid then submit it. But the validation still stops it being submitted. I must be approaching this wrong, but I'm not sure why.

Fiddle

var stepLink = $('#Steps a');
var form = $('#FormSignup');
var btnSave = $('#FormSignup_submit');
var isValid = form.valid();

stepLink.on('click', function(e) {
    var url = $(this).attr('href');
    e.preventDefault();
    form.find(url).addClass('js-active').siblings('.Form_section').removeClass('js-active');
});

form.validate();
btnSave.on('click', function() {
    if (!isValid) {
        form.submit();
    }
});

Upvotes: 0

Views: 696

Answers (1)

Sparky
Sparky

Reputation: 98758

Basically, you would need to use a type="button" element and write out an external click handler so that you can control its behavior. You would use a type="button" rather than a type="submit" as the latter would automatically be captured by the plugin. Your "submit" button would be a type="submit" as that is automatically captured and handled by the plugin.

The submitHandler callback is only used for doing something after the form is deemed as "valid", so I'm not sure it's much good for you here. Most typically, this is used to handle the ajax() submission code. Otherwise, the form just submits like a standard form using the URL in the action attribute.

So ignoring the buttons for now, assuming the .validate() method properly initializes the plugin on the form, you would have validation on key up and on blur of each input.

You could manually trigger validation for the whole form at once by using the .valid() method.

Just remember that the .validate() method is only used for initializing the plugin on the form and once you initialize the plugin on the form, it cannot be turned off, paused, or disabled.

EDIT

Using form[0].submit() will bypass validation and submit the form. See: http://jsfiddle.net/effx3p45/22/

Upvotes: 1

Related Questions