I have a form, on which I have a button - When the user clicks the button Add, a function is called which adds a new row to a table in the same form, but using javascript.
I have used the jquery validation plugin,the problem I have is that the validation only fires when I use a submit button,but not when my button is clicked, which runs my function.
I understand why this is - The validation plugin wants the form to be submitted.
Is there any way I can cause the validation to run and return its result? My function can then either do nothing if the validation fails, or go ahead and post the user entered data to my function if the validation passes. Obviously I would need to do this without the form actually submitting.
Any help greatly appreciated - I've tried a few ideas I found whilst Googling on this, but nothing has worked so far.
Thank you beforehand.
If you mean http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
if ($j('#Form1').validationEngine({ returnIsValid: true })) {
//is valid
}
Or if you mean: http://docs.jquery.com/Plugins/Validation
$("#myform").validate({
submitHandler: function(form) {
// some other code
return false;
}
});
Related
I am trying to use parsley to validate a varying number of inputs (order line items) encased within a DIV structure (the main form is for order details).
Due to this I am converting the data outside the form into JSON and injecting into a hidden field.. All works great (including the server side validation).
The issue I am having is that on form submit, the validation runs through, and shows the errors as required, but the form continues through the submission process on 'fail'.
is there any way to see if there are any errors present on the page and prevent the page submit to continue?
Here is what is not working:
$('#submit-form').on('click', function(e){
e.preventDefault();
// Validate line items
$.each($('#lineItems').find('.input-group input'), function(i, val){
$(val).parsley(parsleyConfig).validate();
});
All the errors show up but the page POSTs still.
However, if the data in the main form is no good, on submit it will pop up the validation errors, that is set by this:
// Validation
var parsleyConfig = {
errorsContainer: function(pEle) {
return pEle.$element.parent().siblings('.text-danger');
}
};
$('#editForm').parsley(parsleyConfig);
I have tried using the 'form:submit' event with parsley to no luck either...
$('#editForm').parsley(parsleyConfig).on('form:submit', function(){
// Validate line items
$.each($('#lineItems').find('.input-group input'), function(i, val){
$(val).parsley(parsleyConfig).validate();
});
});
I cannot seem to find a way to get the returned value of if the validation has passed and abort my submit script...
inside your 'form:submit' event listener write this code:
//the validate() calls the error validation and add the error messages:
if ($('#editForm').parsley().validate() == false) {
//Do nothing:
return;
}
My contact form is not working correctly. When I enter wrong data, all is working as it should, but when data is correct the input fields are not showing. I need to click them with mouse and then they start showing.
This is what I have tried so far:
$('#submit_btn').click(function() {
if($('#register').find('.wpcf7-mail-sent-ok').length > 0){
$('#name-152').val('Full Name').show('slow');
$('#email-152').val('Email').show('slow');
$('#phone-152').val('Phone Number').show('slow');
}
});
please note that class .wpcf7-mail-sent-okappears only when form is filled submitted and correctly. What confuses me the most is that .find cannot find the descendant .wpcf7-mail-sent-ok, and it is one of the descendants.. I have tested it with console.log(); and alert();
This is Wordpress plugin - Contact Form 7
Any ideas?
The "Contact Form 7" plug-in acts on the submission event to do its magic, like manipulating styles and replacing the standard form submission behaviour by an AJAX-style submission.
As this might happen after the button's click event, and probably on the form's submit event, your code runs too soon.
One way to get around this, is to delay the execution of your code with setTimeout:
$('#submit_btn').click(function() {
setTimeout(function () {
if ($('#register').find('.wpcf7-mail-sent-ok').length) {
$('#name-152').val('Full Name').show('slow');
$('#email-152').val('Email').show('slow');
$('#phone-152').val('Phone Number').show('slow');
}
}, 100);
});
I am using jQuery Validator to validate a form and I wanted to disable the fields that were blank when the user clicks submit so that the server does not receive any data from the inputs that were left blank. To disable them, I used the following Javascript:
$(function() {
$("#form1").submit(function() {
$(this).find(":input").filter(function(){ return !this.value; }).attr("disabled", "disabled");
return true; // ensure form still submits
});
});
Here is my problem: This code works great assuming the form was validated on the first submission. However, if the user hits submit but it was not validated, all of the alerts for various required fields and such pop-up, but all of the inputs are disabled. How can I fix this? I need to know how to re-enable them if the form is not validated and properly submitted.
It doesn't make sense to disable the field to submit. Rather—you should first do a front-end only validation that prevents submitting if there are empty fields (and those fields are required to not be empty).
You can set up a variable (or a function) to run through your validation and only submit if it returns true. This is a condensed example of just one input.
var validate = ($('input').val() == '') ? false : true;
if(validate){
// submit your form
} else {
// throw your errors
}
Then it would be good to clear your errors at the beginning of your validation.
I'm using
$('#myform')[0].reset();
to clear HTML form fields when a clear button is clicked. I'm also using jquery.validate.js. So when the above runs, it triggers form validation. All form fields with any validation then display their error messages. How do I prevent this?
I have tried this but it didn't do anything:
$('#myform').removeAttr("nonvalidate");
From the question you linked, the answer is what you want... All you have to do is capture the reset event and call v.resetForm().
var v = $('form').validate(); //etc etc whatever you have here, the important part is saving "v"
$('form').on('reset',function () {
v.resetForm();
});
See it working here: http://jsfiddle.net/uuu8jerr/
I have used jQuery plugin: Validation
To validate some input fields, but I need to bypass validation when the user click the cancel button(which preforms a posts back)
Any help would be greatly appreciated
Sp
$("myButton").click(function () {
$("#mainform").validate().cancelSubmit = true;
$("#mainform").submit();
return false;
});
Actually I tried this and the answer is even simpler.
$("myButton").click(function () {
$("#mainform").validate().cancelSubmit = true;
});
The other two lines prevented my cancel button's submit action from working, so I whittled it down to just this one line and now it works great, validating on submit but not on cancel.
This allows my cancel button to submit the form with its Spring Web Flow event id regardless of the valid state of the form.