jQuery multiple inputs with one Function RegExp - javascript

I've got a form with more than 1 inputfields. The format that should be allowed is hh:mm / h:mm. So I already have a function, that checks my input if the format is true inbstandly on input.
So what I want is, if i click on my submit button i'd like to check all the boxes again if the format is right. If true then submit(); else then alert() or something. But that isnt the problmem.
I have no idea how i can realize this. Thank you in advance :))
function validateAbs(inputField) {
var isValid = /^([0-1]?[0-9]|2[0-3]):([0-5][0-9])(:[0-5][0-9])?$/.test(inputField.value);
if (isValid) {
inputField.style.backgroundColor = '#bfa';
} else {
inputField.style.backgroundColor = '#fba';
}
return isValid;
}
$(function(){
$('#ist').on('input', function() {
//This is one of ne hh:mm Textboxes
validateAbs(this);
});
});
$(function(){
$('#abssubmit').on('input', function() {
//This is my Submit-Button
});
});

It's surprisingly easy:
$('#abssubmit').on('input', function() {
$("selector-for-the-inputs-you-want-to-check").each(function() {
validateAbs(this);
});
});
If you want to know whether any of them is invalid, you can use filter:
$('#abssubmit').on('input', function() {
var invalidFields = $("selector-for-the-inputs-you-want-to-check").filter(function() {
return !validateAbs(this);
});
if (invalidFields.length) {
// At least one field was invalid
}
});

You will need to change to a submit handler not an 'input' handler:
$('#abssubmit').on('submit', function(ev) {
var isValid;
ev.preventDefault(); // to stop the form from submitting
$('#ist').each(function() {
if (!validateAbs(this)) isValid = false;
});
if (isValid) {
this.submit(); // all the validations succeeded
}
});

Related

JQuery RangeError On form submit

I have a form I am implementing some custom validation on. This is the block of JavaScript that handles the final check before the form is submitted:
$('.enquiry-form-container form').submit(function (e) {
e.preventDefault();
var invalid = false;
var isblank = false;
//Loop through each input and check if valid or empty
$('.validate').each(function () {
if ($(this).hasClass('invalid')) {
isInValid($(this));
invalid = true;
} else {
//Any fields are blank
if ($(this).val() === "") {
$(this).addClass('blank');
isblank = true;
} else {
$(this).addClass('valid');
isValid($(this));
$(this).removeClass('blank empty');
}
}
});
if (!invalid & !isblank){ //SEND
$(this).find(":submit").prop("disabled", true); //Prevent submit to prevent duplicate submissions
$(this).submit();
} else { //DONT SEND
}
});
Each time I fill out the form and attempt to submit I get the following error in the console:
Uncaught RangeError: Maximum call stack size exceeded(…)
I understand that this can happen for a number of reasons, usually an infinite loop. Can anyone see where I am going wrong in the above code? Is the .submit() function calling the submit() method again... If so how can I resolve this and send form if it validates?
Just for full clarity, here is my isInValid() and isValid() functions.. They are used to add or remove the appropriate classes so I can style the inputs differently depending on the input.
//VALID INPUT
function isValid(input) {
input.addClass('valid');
input.removeClass('invalid empty blank');
input.parent().parent().next('.hint').css('visibility', 'hidden');
}
//INVALID INPUT
function isInValid(input) {
input.addClass('invalid');
input.removeClass('valid empty blank');
input.parent().parent().next('.hint').css('visibility', 'visible');
}
Generally, you just need to worry about cancelling an event in the if/then branches of your validation logic that indicate a problem. If you don't hit those branches, the form submits as it normally would. This removes the need for you to manually indicate that you want the form submitted.
See comments inline below for details:
$('.enquiry-form-container form').submit(function (e) {
var invalid = false;
var isblank = false;
// Loop through each input and check if valid or empty
$('.validate').each(function () {
if ($(this).hasClass('invalid')) {
isInValid($(this));
invalid = true;
e.preventDefault();
return;
} else {
// Any fields are blank
if ($(this).val() === "") {
$(this).addClass('blank');
isblank = true;
e.preventDefault();
return;
} else {
$(this).addClass('valid');
isValid($(this));
$(this).removeClass('blank empty');
}
}
});
// If we've gotten this far, the form is good and will be submitted.
// No need for an if/then/else here because you've already trapped
// the conditions that would prevent the form from being submitted
// above.
// Prevent submit to prevent duplicate submissions
$(this).find(":submit").prop("disabled", true);
});
It's also a good idea to separate your validation code into its own function, so a reworked example would be:
$('.enquiry-form-container form').submit(function (e) {
// You only need to worry about cancelling the form's submission
// if the form is invalid:
if (!validate()) {
e.preventDefault();
return;
}
// If it is valid, you don't need to interfere in that process, but
// you can certainly do other "valid" operations:
// Prevent submit from being clicked to prevent duplicate submissions
$(this).find(":submit").prop("disabled", true);
});
function validate() {
// This function doesn't worry about cancelling the form's submission.
// Its only job is to check the elements, style them according to
// their validity (and, in a perfect world, the styling would be off-
// loaded to anther function as well) and return whether the form is
// valid or not.
var invalid = false;
var isblank = false;
// Loop through each input and check if valid or empty
$('.validate').each(function () {
if ($(this).hasClass('invalid')) {
isInValid($(this));
invalid = true;
} else {
// Any fields are blank
if ($(this).val() === "") {
$(this).addClass('blank');
isblank = true;
} else {
$(this).addClass('valid');
isValid($(this));
$(this).removeClass('blank empty');
}
}
});
// If invalid or isblank is true, there was a problem and false
// should be returned from the function
return !invalid || !isblank;
}
I think the main problem for you is calling submit() from inside the handle of the submit. the better way to do this is cancel the request just when you see that there is invalid data.
$('.enquiry-form-container form').submit(function (e) {
e.preventDefault();
var invalid = false;
var isblank = false;
//Loop through each input and check if valid or empty
$('.validate').each(function () {
if ($(this).hasClass('invalid')) {
isInValid($(this));
invalid = true;
} else {
//Any fields are blank
if ($(this).val() === "") {
$(this).addClass('blank');
isblank = true;
} else {
$(this).addClass('valid');
isValid($(this));
$(this).removeClass('blank empty');
}
}
});
if (!invalid & !isblank){ //SEND
$(this).find(":submit").prop("disabled", true); //Prevent submit to prevent duplicate submissions
return true;
} else { //DONT SEND
return false;
}
});
I think the main problem for you is calling submit() from inside the handle of the submit. the better way to do this cancels the request just when you see that there is invalid data.
$('.enquiry-form-container form').submit(function (e) {
// remove the e.preventDefault();
var invalid = false;
var isblank = false;
//Loop through each input and check if valid or empty
$('.validate').each(function () {
if ($(this).hasClass('invalid')) {
isInValid($(this));
invalid = true;
} else {
//Any fields are blank
if ($(this).val() === "") {
$(this).addClass('blank');
isblank = true;
} else {
$(this).addClass('valid');
isValid($(this));
$(this).removeClass('blank empty');
}
}
});
if (!invalid & !isblank){ //SEND
$(this).find(":submit").prop("disabled", true); //Prevent submit to prevent duplicate submissions
//$(this).submit(); // this should be removed
} else { //DONT SEND
e.preventDefault();
}
});

Customizing a password strength validator plugin

I am using a plugin called pStrength.jquery.js and for some reason its not submitting the form I have, or it is submitting the form even if it is not supposed to (when I changed the code)
The code i am using is:
$(document).ready(function () {
$('#myForm').submit(function () {
return false;
});
$('#myElement1, #myElement2').pStrength({
'changeBackground': false,
'onPasswordStrengthChanged': function (passwordStrength, strengthPercentage) {
if ($(this).val()) {
$.fn.pStrength('changeBackground', this, passwordStrength);
} else {
$.fn.pStrength('resetStyle', this);
}
$('#' + $(this).data('display')).html('Your password strength is ' + strengthPercentage + '%');
},
'onValidatePassword': function (strengthPercentage) {
$('#' + $(this).data('display')).html(
$('#' + $(this).data('display')).html() + ' Great, now you can continue to change your password!');
$('#myForm').submit(function () {
return true;
});
}
});
});
Someone has told me that I should use booleans and inside the validation checks, set it to true or false.
The problem is that i have no idea how to do this
Is there anyone that could help me and show me the code to do this?
Thank you in advance
The reason it was still submitting was because the onValidatePassword function runs on each individual field, whereas you actually had two fields to validate. If one field validates and the other doesn't, the form would still submit because the Boolean had already been set to true, which was the only condition needed to submit.
Updated code below, you can also refer to the fiddle.
$(document).ready(function () {
$('#myForm').submit(function (event) {
// TODO: check that the two field values match as well
if ($('#myElement1').data('valid') === 'yup' &&
$('#myElement2').data('valid') === 'yup') {
// remove these three lines to make it submit
alert('Submitting...');
event.preventDefault();
return false;
// and uncomment this one line
//return true;
} else {
event.preventDefault();
return false;
}
});
$('#myElement1, #myElement2').data('valid', 'nope');
...
Your complete onValidatePassword callback should now look like this:
'onValidatePassword': function (strengthPercentage) {
$('#' + $(this).data('display')).html(
$('#' + $(this).data('display')).html() + ' Great, now you can continue to change your password!');
formValid = strengthPercentage >= 60;
// set for each element
if (strengthPercentage >= 60) {
$(this).data('valid', 'yup');
} else {
$(this).data('valid', 'nope');
}
}
Inside your onValidatePassword, you're binding to the submit event, instead of submitting the form. Replace this code:
$('#myForm').submit(function () {
return true;
});
with
$('#myForm').submit();

jQuery empty input check function not working as expected

This question has been done to death on SO and I'm really, really sorry! I've already taken the bones of the below idea from a couple of SO questions on the same theme.
All said though, I still can't get it to work as expected.
It works OK if NONE are filled in.
It works OK if the END input is filled in and not the others.
It works OK if the MIDDLE input is filled in.
If you fill in ONLY the FIRST input though, it alerts, but submits anyway?
JSFIDDLE
$(document).ready(function (e) {
// completed count submit handler
$("#submit_counts_button").on('click', function () {
window.incomplete = false;
$('input[type=number]').each(function () {
if ($(this).val().length == 0) {
window.incomplete = true;
alert('Some fields are empty');
return false;
} else {
if (window.incomplete === false) {
$("#submit_counts_button").prop('disabled', true);
$("#submit_counts_button").html('Please Wait ...');
//$("#update_form").submit();
}
}
});
});
});
I'm sure it's something totally embarrassingly obvious but after a 16 hour day, I just can't see it. Any help appreciated ...
You need to pull the 'incompletion' check outside of the .each
$(document).ready(function (e) {
// completed count submit handler
$("#submit_counts_button").on('click', function () {
window.incomplete = false;
$('input[type=number]').each(function () {
if ($(this).val().length == 0) {
window.incomplete = true;
alert('Some fields are empty');
return false;
}
});
if (window.incomplete === false) {
$("#submit_counts_button").prop('disabled', true);
$("#submit_counts_button").html('Please Wait ...');
//$("#update_form").submit();
}
});
});
http://jsfiddle.net/6WpeF/6/
try
if(document.getElementById('id of input').value != ""){}

Form validation with Jquery not behaving as expected

I am using jQuery to validate some fields in a form, and seem to be having an issue with one field in particular (#inputTel).
If an incorrect format is entered, an error message pops up underneath, which is fine, but the problem is once the correct format is entered the message does not disappear.
Here's a jsFiddle with the complete demo.
This is the section in question:
//Tel Validate
function is_valid_tel() {
$this = $("#inputTel");
var pattern = new RegExp("^\d{11}$");
if (pattern.test($this.val())) { // valid
if ($this.closest(".control-group").hasClass("error")) $this.closest(".control-group").removeClass("error");
$this.siblings(".help-inline").css("display", "none");
return true;
} else { // error
if (!$this.closest(".control-group").hasClass("error")) $this.closest(".control-group").addClass("error");
$this.siblings(".help-inline").css("display", "block");
return false;
}
}
Every other field works as expected except this one. My jQuery skills are limited so I'm unsure of how to solve this.
Problem in your code:
Replace var pattern = new RegExp("^\d{11}$"); with var pattern = new RegExp(/^\d{11}$/);
Updated code
//Tel Validate
function is_valid_tel() {
$this = $("#inputTel");
var pattern = new RegExp(/^\d{11}$/);// Update this line
if (pattern.test($this.val())) { // valid
if ($this.closest(".control-group").hasClass("error")) $this.closest(".control-group").removeClass("error");
$this.siblings(".help-inline").css("display", "none");
return true;
} else { // error
if (!$this.closest(".control-group").hasClass("error")) $this.closest(".control-group").addClass("error");
$this.siblings(".help-inline").css("display", "block");
return false;
}
}
Check the fiddle http://jsfiddle.net/rfg8H/
You could also use something like below, less cubersome:
$(function() {
function validateTheForm() {
var ok = true;
$(".input-medium").each(function() {
if($(this).val() == "") //use regex actually here
{
$(this).next().css("display","inline");
ok = false;
}
else {
$(this).next().css("display","none");
}
});
return ok;
}
$(".btn").click(function() {
$("form").submit(validateTheForm());
$("form").submit();
});
});

Jquery - continue with form submit after validation

I have this code:
kreiraj_korisnika.on('submit', function(){
if(error_count != false) {
kreiraj_korisnika.submit();
} else {
return false;
}
});
How can I continue with form submitting when error_count is true (without AJAX submit)?
You have to use preventDefault() method of event variable to avoid the submit. Try sopmething like:
kreiraj_korisnika.on('submit', function(e) {
if (error_count)
{
// avoid the submit...
e.preventDefault();
// show your erros messages
}
});
If error_countvariable is true, the submit will happen.
Is kreiraj_korisnika actually an jQuery object ?
If you just assigned it to a result of getElementById() it won't work.
In that case:
$(kreiraj_korisnika).on('submit', function(e){
var errorCount = 0;
if(errorCount == 0)
{
this.submit();
}
else
{
alert('Invalid form input !');
e.preventDefault();
}
});
Léon

Categories