preventing form to be submitted using jquery - javascript

I want to check on form submit that certain condition is satisfied before submitting the form
function checkConditions(e){
if ($('#someId').val() == '') {
console.log('value of #someId is empty');
e.preventDefault();
return false;
}
}
$('form').submit(function (e) {
checkConditions(e);
});
on form submit I'm getting print inside console that value is empty but form is sumbitted eitherway. What I'm doing wrong here?

Try this:
function checkConditions(){
if ($('#someId').val() == '') {
console.log('value of #someId is empty');
return false;
}
return true;
}
$('form').submit(function (e) {
if(!checkConditions()){
e.preventDefault();
return false;
}
});

Related

The submit button works only once

I developed a function that keeps the submit disabled until filling all the fields. The function works, but when I create two more users the submit button enables before filling the fields; my function works only once.
The button is working and the data is saved, but the submit button is enabled before filling the fields.
$(document).ready(function () {
$('#myForm input').keyup(function () {
var empty = false;
$('#myForm input').each(function () {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('#btnsave').attr('disabled', 'disabled');
} else {
$('#btnsave').attr('disabled', false);
}
return empty;
});
});
i think you create new inputs dynamically, then try this:
$('#myForm').on('keyup', 'input', function () {
var empty = false;
$('#myForm input').each(function () {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('#btnsave').attr('disabled', 'disabled');
} else {
$('#btnsave').attr('disabled', false);
}
return empty;
});
});

Maximum call stack size exceeded with jQuery promise()

I'm trying to apply a simple form validation in jQuery. If a form field is empty, add a class error. If any of the fields are empty, don't submit. I have the following:
$('#contact-form').submit(function(event) {
event.preventDefault();
var formValid = true;
$('input.required, textarea.required, select.required').each(function() {
if($(this).val() === '') {
formValid = false;
$(this).addClass('error');
} else {
$(this).removeClass('error');
}
}).promise().done(function() {
if(formValid) {
$('#contact-form').submit();
}
});
});
Howerver when the code hits the line to submit the form, I am seeing a JavaScript error:
Uncaught RangeError: Maximum call stack size exceeded
Here's how your code would run if the form is valid:
on submit, prevent default action
check fields
if they are valid, form.submit - which causes submit event, goto step 1
endless recursion
it's very simple because there's no asynchronous code in the handler
$('#contact-form').submit(function(event) {
var formValid = true;
$('input.required, textarea.required, select.required').each(function() {
if($(this).val() === '') {
formValid = false;
$(this).addClass('error');
} else {
$(this).removeClass('error');
}
});
if (!formValid) {
event.preventDefault();
}
});
How many fields do you have to validate, and why promise associated to each of them? try after checking all fields
if(formValid) {
$('#contact-form').submit();
}
else return false
$('#contact-form').submit(function(event) {
event.preventDefault();
var formValid = true;
$('input.required, textarea.required, select.required').each(function() {
if($(this).val() === '') {
formValid = false;
$(this).addClass('error');
} else {
$(this).removeClass('error');
}
}).promise().done(function() {
if(formValid) {
$("#contact-form").off('submit').submit();
}
});
return false;
});
First, .promise().done(...) can be purged. As has been said, nothing asynchronous is going on.
That aside, the actual issue is most likely the repeated re-invocation of the submit handler.
Try a POJS (as opposed to jQuery) form submission :
if(formValid) {
this.submit();
}

Validate email on enter

I want to validate an email textbox when I push the enter button. One problem: when i push enter, the text dissapears and nothing happens.
My code:
$(document).keypress(function(e) {
if (e.which == 13) {
mailcontrole();
}
});
function mailcontrole {
var mail = $("#email").val();
if (IsEmail(mail) == false) {
alert("false");
}
}
function IsEmail(email) {
var regex = /^([a-zA-Z0-9_\.\-\+])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!regex.test(email)) {
return false;
} else {
return true;
}
}
You have the default behaviour of submitting your form using the ENTER.
$(document).keypress(function(e) {
e.preventDefault();
if (e.which == 13) {
mailcontrole();
}
});
Adding e.preventDefault(); stops this behaviour!
UPDATE
Your function is missing () also ( Thanks to Alex )!
function mailcontrole() {
var mail = $("#email").val();
if (IsEmail(mail) == false) {
alert("false");
}
}
the form may submit because the form gets submitted when you click enter and that would empty the form.
use event.preventDefault() to make it not submit.
try this:
$(document).keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
mailcontrole();
}
});

form not submitting issue

I have a code snippet like this.When I submit it shows alert button and ajax function calls.How can I prevent.I have a textbox with id=id1.I need to call ajax only if there is a value in textbox.
I have also another button in same page so I need to call common validate function inside that button also.So I wrote common function.
$( document ).ready(function() {
function validate() {
if($('#id1').val=='') {
alert('enter a value');
return false;
}
return true;
}
$('#button').click(function() {
validate();
$.ajax...code goes here
});
});
If it is not valid, return from the click handler without executing the ajax call.
In your case you are calling the validate method but you are not doing anything with the value returned from it. So use a if condition to check whether it is true or false, if false then return from the click handler
$(document).ready(function () {
function validate() {
if ($('#id1').val() == '') {
alert('enter a value');
return false;
}
return true;
}
$('#button').click(function () {
if (!validate()) {
return;
}
$.ajax...code goes here
});
});
keep your functions out of jquery functions, to make it reusable across other places.
$( document ).ready(function() {
$('#button').click(function() {
var isValid = validate();
if(isValid){
$.ajax...code goes here
}
});
});
var validate = function() {
if($('#id1').val=='') {
alert('enter a value');
return false;
}
return true;
}
Return the validity of the check box and if it is true then trigger the ajax request.

jQuery Stop submitting form by checking error variable

I have a simple form with some form fields. Some of them are required some are not. The required field are required by adding the class 'required'.
When I submit I check the #contact-form fields and on the basis of there I give the empty field error classes and submit the form yes or no.
Adding the error classes to the fields is not a problem, but checking the "error" variable is. Because I don't know where I can check the error variable.
This is my jQuery code:
$('#contact-form').submit(function (event) {
var errors = false;
$(this).find('.required').each(function () {
if ($(this).val().length < 1) {
$(this).addClass('error');
errors = true;
}
});
if (errors == true) {
event.preventDefault();
}
});
JsFiddle
The following code should do what you want, just give your contact form submit button the id of #contact-form-button.
$('#contact-form-button').click(function(e) { // using click function
// on contact form submit button
e.preventDefault(); // stop form from submitting right away
var error = false;
$(this).find('.required').each(function () {
if ($(this).val().length < 1) {
$(this).addClass('error');
error = true;
}
});
if (!error) { // if not any errors
$('#contact-form').submit(); // you submit form
}
});
$('#contact-form').submit(function (event) {
var errors = false;
$(this).find('.required').each(function () {
if ($(this).val().length < 1) {
$(this).addClass('error');
errors = true;
}
});
if (errors == true) {
event.preventDefault();
return false;
}
return true;
})
if validation cross successfully then it return true for submit the form
I found out that my code just works. The reason I thought it was not working, is because I was still using PHP handling my real website where I made 1 field required and in my jQuery not. This made the confusion.
So the following code works:
$('#contact-form').submit(function (event) {
var errors = false;
$(this).find('.required').each(function () {
if ($(this).val().length < 1) {
$(this).addClass('error');
errors = true;
}
});
if (errors == true) {
event.preventDefault();
}
});

Categories

Resources