I have worked some recapthca into my web form and want to maintain the client side form validation. As the form currently is
<form action="ajax/ajax_repSubTesting.php" method="POST" name="submitform" onSubmit="checkform(this)">
checkform() is a series of if/else statements to inform the user that a data field is either blank or not valid. Problem is that once the submit button is clicked , the checkform is called popping up an error window, and once closed the ajax script is called.
How would I code this so that the form action is dependent on everything in checkform() validated properly?
Returning false from an inline onsubmit event handler will will cancel the form submission. The checkform function should return false (as appropriate) for invalid form data
function checkform () {
if (!valid) { return false; }
// ..
}
and the returned value must be propagated through the inline event handler
<form .. onsubmit="return checkform()">
^^^^^^
See also
How do I cancel form submission in submit button onclick event?
How to prevent form from being submitted?
(Also, 'ajax' is normally called via XHR, not form submission.)
try adding id to the submit button and yhe form itself.
Then at the beginning of the validation method add
event.preventDefault();
Which will cancel the form submition.
Then at the end of the validation method if the form is valid add the next jQuery method:
$('form').submit() it will trigger form submition.
Related
I need to validate a form before it can be submitted. I'm following the pretty standard procedure of adding event listener to the form's submit event, canceling the default behavior, and then once everything has been validated, submitting the form through submit() method after removing the event listener. But for some reason, the event doesn't get removed and the page keeps on reloading. Here is my code:
// Prevent form submission on button click and validate form input fields first
cartForm.addEventListener('submit', validateInputFields);
function validateInputFields(event) {
event.preventDefault();
validateName();
validateRecipientPhone();
validateCustomerPhone();
validateAddress(submitForm);
}
function submitForm() {
// remove validation event listener and submit form
cartForm.removeEventListener('submit', validateInputFields);
cartForm.submit();
}
Here validateAddress makes an async API call and takes some time to resolve therefore I passed submitForm as callback which can be triggered once validateAddress resolves. Does this have something to do with my form not getting submitted? Or am I making some other mistake? It's stuck in a loop no matter address gets validated or not.
The first three validation functions are only checking if fields are populated and have correct lengths.
How can I work around this issue?
Here's the part of my form:
<form name='form-main' onsubmit='return validate()' action='' method='post'>
<center><input type='submit' onClick='this.disabled=true; this.form.submit();' value='I accept - Download the GM!'/></center>
</form>
and here's the validate function:
function validate()
{
// this is just to test if it actually shows
alert('You must not leave any of the fields blank!');
return false;
}
Whenever I hit the submit button, nothing happens, the page just reloads.. I would like it so it shows the alert dialog.
When you call the form's submit function, the submit event is not fired. This is by design, the assumption is that if you're triggering the submission from code, you've already done any necessary validation. (Note that this is true of the HTMLFormElement#submit function; it is not necessarily true of the wrappers libraries put around it.)
In your example, I would remove the click handler on the button. It's a submit button, so just put any relevant logic in the submit event on the form. Alternately, if you prefer, call validate() as part of the button's click.
You can override the original prototype "submit" method like this:
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = function (){
this._submit();
alert('Deddy Is Great :)'); // or fire the onsubmit event manually
};
The onclick event of your submit button is firing immediately before the onsubmit event of your form, and this is disabling subsequent events from propagating and firing, which causes the validate function to never get triggered. You can see this is you remove the this.disabled=true; from your code example.
Per the docs at W3:
A form control that is disabled must prevent any click events that are
queued on the user interaction task source from being dispatched on
the element.
You should remove the click event code from the submit button, and simply allow the function to do what you need it to do, including disabling the button. For example:
function validate() {
// this is just to test if it actually shows
document.getElementById('sub').disabled=true;
alert('You must not leave any of the fields blank!');
return false;
}
jsFiddle example
I am using Gravity Forms in combination with a custom jquery code.
The jquery code assigns a validation to the form before it is submitted and fires a sweetalert if something is missing.
After clicking the submit button of the form the first time, the jquery validations work and the alert is fired.
Because there are submission errors, gravity forms now shows the validation errors too.
When filling out all required fields and clicking on the same submit button again, the jquery validation is not assigned to the button any more and no alert is fired. Why is that? The id of the button is still the same.
The JS code, it works fine, the only problem is, that its not assigned anymore to the submit button of the gravity form when the form is in the validation erros state.
jQuery( "#gform_submit_button_3" ).on('click', (function() {
//alert ("test");
var jugend = jQuery("#input_3_5").val();
var trainer_vorname = jQuery("#input_3_6_3").val();
Solution:
Prevent the Form to be submitted by the following code:
jQuery(document).on( 'click', '#gform_submit_button_3', function (e) {
e.preventDefault();
//do what you want with jquery/JS with the form
Ok, i found the solution by myself.
With the following JS (added to the wp themes JS section) i can prevent the Gravity Form to be submitted.
jQuery(document).on( 'click', '#gform_submit_button_3', function (e) {
e.preventDefault();
After that, i use JS to do some form validations. If the form is OK, i am sending the form data with a ajax post request to the server.
Keep in mind that the normal submission hooks are not working when preventing the form submission.
I want to know if submit gets called if my form data are not valid in html5 validation. For example I have a form id personal_info.
I use the following block to get on submit event :
$("#personal_info").submit(function(event) {
event.preventDefault();
saveData("personal_info");
});
function saveData(formName){
console.log("test");
}
Is is the default behavior that the function saveData gets called on submit because even if my form is not valid the function gets called.
How to prevent submit function from being called if my form is invalid?
The new HTML5 validation APIs will not submit an invalid form unless you use the novalidation attribute on the form. See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation for more information.
It works but should on submit be called if the form is not valid.
Anytime your form #personal_info is submitted, the submit function will run.
The reason it may appear that the submit function isn't running, is because of this line
event.preventDefault();
This prevents the default action from taking place, which is submitting the form. So the form won't submit normally, thus your web page won't reload/refresh.
Calling submit even if the form is not valid, is just fine. Nothing wrong with that. The way your code is in your question, the saveData function is set to run each time, even if it's not valid. So we can change that from happening.
Like A. Wolff said in the comments, you could just wrap an if statement around your call to saveData function.
So you could have your code look something like this
$("#personal_info").submit(function(event) {
event.preventDefault();
if ($(this).valid()) { // if form is valid
saveData("personal_info"); // then do this
}
});
function saveData(formName){
console.log("test");
}
hello i want to know how to submit form using a tag i know it is
but when i try javascript validation on form eg
<form method="post" onsubmit="valid() name="myform" action="index.php">
then the valid function doesn't work so is there any way to make the function work.
I want only a tag to be used as onsubmit.
i used simple alert function for checking the validation but it doesnot worked but when i checked it using input type submit tag then it started working.
Your onclick() function is looking for a form with the ID myform. In your example code, your form doesn't have an ID or name.
This code should work:
So long as you include the ID in the form element:
<form method="post" onsubmit="valid()" name="myform" id="myform">
Historically, form submission via submit() JavaScript method does not invoke submit event handler (most likely to prevent infinite recursion).
If you want to call a code that is contained inside onsubmit attribute, you should call it explicitly before submitting form programmatically. For example:
var form = document.querySelector('form'),
link = document.querySelector('a');
link.onclick = function() {
alert('Handler attached with JS.');
form.onsubmit.call(form);
form.submit();
return false;
};
The answer is simple - submit() method does not trigger onsubmit event. If you want to validate your code on submit then you have to call valid() function by yourself.
Example:
which will trigger your onsubmit (so it will call valid())
or just:
submit() method can be then called from that function after positive validation or whenever you want.
I know that the question is really old. But if someone actually needs a solution
i.e. in case when one wants required fields to be validated by the browser.
Inside of the form create an
<input type="submit" name="submit" />
And the click on the link should actually trigger the click on that submit input: