After validating my form with javascript I can not get it to submit to the server
myForm.addEventListener("submit", validation);
function validation(e) {
let data = {};
e.preventDefault();
errors.forEach(function(item) {
item.classList.add("cart__hide");
});
at the end of the validation I have the following code
if (!error) {
myForm.submit();
}
I also tried
if (error = false) {
myForm.submit();
}
if ((error == false)) {
myForm.submit();
}
when I console log error I am getting all false so the form should submit.
I am getting the following console log error
TypeError: myForm.submit is not a function
I did this same validation on an html page and it worked fine. Now I am trying to get it to work on a PHP page and it will not submit.
I am not sure why the myForm.submit() is causing the error.
Thanks
Jon
Remove e.preventDefault(); from your code and put it in your validation function like this:
if (error) {
e.preventDefault();
}
What you need to do is to only call Event#preventDefault when there is an error.
myForm.addEventListener("submit", validation);
function validation(e) {
var error = !form.checkValidity(); // replace this with the actual validation
if (error) e.preventDefault();
}
<form>
<input type="text">
<input type="submit" value="submit">
</form>
Related
I am using Recurly's JavaScript API to process subscriptions payments.
I want to implement Google's reCaptcha V3 API to the Recurly's self-hosted page.
<script src="https://js.recurly.com/v4/recurly.js"></script>
recurly.configure({
publicKey : 'xxx-xxx',
required : ['cvv', 'address1', 'city', 'state', 'country', 'postal_code'],
});
// When a customer hits their 'enter' key while in a field
recurly.on('field:submit', function (event) {
$('form').submit();
});
// On form submit, we stop submission to go get the token
$('form').on('submit', function (event) {
// Prevent the form from submitting while we retrieve the token from Recurly
event.preventDefault();
// Reset the errors display
$('#errors').text('');
$('input').removeClass('error');
// Disable the submit button
$('button').prop('disabled', true);
var form = this;
// Now we call recurly.token with the form. It goes to Recurly servers
// to tokenize the credit card information, then injects the token into the
// data-recurly="token" field above
recurly.token(form, function (err, token) {
// send any errors to the error function below
if (err) error(err);
// Otherwise we continue with the form submission
else form.submit();
});
});
Things is, Google's API implementation is something like this :
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
<button type="submit" id="btn-submit" class="g-recaptcha" data-sitekey="xxxxxxxxx" data-callback='onSubmit' data-action='submit'>Submit</button>
<script>
function onSubmit(token)
{
document.getElementById("recaptchaResponse").value = token;
document.getElementById("frm-subscribe").submit();
}
</script>
Both have their own version of onSubmit. How do I include Google's one into Recurly's ?
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
<button type="submit" id="btn-submit">Submit</button>
recurly.token(form, function (err, token) {
// send any errors to the error function below
if (err) error(err);
// Otherwise we continue with the form submission
else
{
grecaptcha.ready(function()
{
grecaptcha.execute('xxx-xxx-site-key', {action: 'submit'}).then(function(token)
{
document.getElementById("recaptchaResponse").value = token;
form.submit();
});
});
}
});
I need to call javascript ajax function after successful dynamically created form submit.
Or how to check the form was successfully submitted or not using java script .
Here's how to check if the form was submitted and also an example of how to handle a callback:
var form = document.querySelector('form');
var handleSubmit = function (e) {
// remove the preventDefault
// added just to demonstrate the value is true
// without proceeding with submittion and pg refresh
e.preventDefault()
form.setAttribute('data-submitted', true)
console.log(form.getAttribute('data-submitted'))
handleAjaxCall()
}
var handleAjaxCall = function () {
console.log('ajax call here!')
}
form.addEventListener('submit', handleSubmit, false)
<form data-submitted="0">
<button type="submit">submit</button>
</form>
I have a function that will return an alert if the form was not filled out "error has occured" and if all fields are completed then the alert is "Form submitted successfully". My problem is that if there is an error then the alert "error has occured" fires and when I fill out the incomplete fields and submit the form the "error has occured" fires again because it already exists on the page. How do I ignore any current errors that were already alerted or clear current error alerts so that I can try to validate the form again?
any help is greatly appreciated.
this is my form test page that was built in Salesforce Pardot: http://go.esri.com/l/82202/2016-05-09/2jzdrk
<script>
function submitVerify() {
var formError = document.querySelector("#pardot-form .errors").innerHTML;
if (formError === "Please correct the errors below:") {
alert("error has occured");
} else {
alert("Form submitted successfully");
}
}
</script>
Before alerting that there's an error, empty out your errors field, like this:
<script>
function submitVerify() {
var formError = document.querySelector("#pardot-form .errors").innerHTML;
if (formError === "Please correct the errors below:") {
alert("error has occured");
// <=== reset error message here
document.querySelector("#pardot-form .errors").innerHTML = null;
} else {
alert("Form submitted successfully");
}
}
</script>
When a form submit button is clicked, a function to validate all the field is to be called. Nothing is to happen, however, if the validation fails.
I am using mailto: as my action, does this make a difference?
I would like to get clarification on two things:
Is this the correct way to call a function when clicking the submit button?
$(document).ready(function(){
$('#contactForm').submit(function(){
checkMail();
});
});
Can I still validate the fields even though I'm using mailto:?
Here is the rest of the code:
function checkEmail(){
var email = document.contact.email.value;
if(email == "") {
document.getElemtById("email_error").innerHTML = "No Email Address";
return false;
}
else {
document.getElementById("email_error").innerHTML = ""
return true;
}
}
HTML:
<form name="contact" action="mailto:exampleemail#hotmail.com" method="post">
<li>
<label for="email">Email</label>
<input id="email" type="text" name="email" placeholder="Enter Email Address">
</li>
<span id="email_error"></span>
Further, I don't get an error message on clicking submit.
No, you need the event handler to return false in case the validation failed. This will prevent the action from being executed, i.e. the mail program from being launched.
we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler.
Source
Modify it like this:
$(document).ready(function(){
$('#contactForm').submit(function(){
return validate();
});
});
Of course, this implies that the validate() function needs to actually return false in case the validation fails, and true otherwise.
Further you are missing id="contactForm" on your <form> tag.
Also, you need to grab the email value correctly:
var email = $("#email").val();
There's another mistake: You misspelled getElementById(). Here's a corrected version:
function checkEmail() {
var email = $("#email").val();
if (email == "") {
document.getElementById("email_error").innerHTML = "No Email Address";
return false;
}
else {
document.getElementById("email_error").innerHTML = ""
return true;
}
}
Or alternatively, using all jQuery:
function checkEmail() {
var email = $("#email").val();
var $error = $("#email_error");
if (email == "") {
$error.html("No Email Address");
return false;
}
else {
$error.html("");
return true;
}
}
Here's what you need:
$(document).ready(function(){
$('#contactForm').submit(function(){
if (!validate()) {
return false; // Prevent the submit
}
});
});
For validating the fields of your form, before sending it, you can use the jQuery's validation plugin:
$(document).ready(function(){
$("#contactForm").validate({
submitHandler: function(form) {
// some other code
// maybe disabling submit button
// then:
$(form).submit();
}
});
});
Check the online doc for more information and examples: http://docs.jquery.com/Plugins/Validation#Validate_forms_like_you.27ve_never_been_validating_before.21
What I am trying to accomplish is a (very simple) email validation using jQuery, but no matter what I do, the form will just keep submitting.
<form id="rfq" name="rfq" action="rfq_form" method="post" enctype="multipart/form-data">
...
<input type="image" id="submit" name="submit" src="submit.png" border="0" />
JS email validation:
//$("#rfq").submit(function() { doesnt seem to work either
$('#submit').click(function() {
var email = $('#email').val();
if(email.indexOf("#") == -1){
$("#email").addClass('invalid');
return false; // cancel form submission if email invalid
}
return false; // return true if no errors once i get it working
});
Working Example
First, make sure all event handlers are attached once the DOM is "ready"
I'm using .submit() on the actual form.
$(document).ready(function() {
// now that document is "ready"
$('#formId').submit(function() {
var email = $('#emailInput').val();
alert(email);
if(email.indexOf("#") == -1){
alert("invalid!");
return false; // cancel form submission if email invalid
}
alert("valid!");
return true; // return true if no errors once i get it working
});
});
Try wrapping your code in a ready block.
$(document).ready(function(){
// your code here
});
You should also be using the submit event on the <form> element, I think.
This is going to work. If you don't understand why, feel free to ask :)
var validated = false;
$(document).ready(function(){
$("#rfq").submit(function(event) {
if (validated === true) {
return true;
}
event.preventDefault(); // prevent submission
var email = $('#email').val();
if(email.indexOf("#") == -1){
$("#email").addClass('invalid');
return;
}
validated = true;
return $(this).trigger('submit');
});
});
You could try using this function to validate your address.
function validateEmail(elementValue){
var emailPattern = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailPattern.test(elementValue);
}
And then modify your code to submit the form.
$('#submit').click(function() {
var email = $('#email').val();
if(!validateEmail(email)){
$("#email").addClass('invalid');
}
else {
$("form").submit();
}
});