I am trying to validate my form on submit and if the input's are all filled in they submit to register.php
My problem being it only works if all inputs are blank - otherwise it errors - I'm just trying to check if any of those fields are blank before submiting
function submitform() {
if ($('#name, #email, #user, #address, #phone').val().length === 0) {
$(this).addClass('warning');
} else {
alert("form submitted");
}
}
You cant do a .val on an array. It should be
function submitform(){
var warning = false;
$('#name, #email, #user, #address, #phone').each(function() {
$(this).val().length === 0){
warning = true;
return;
}
});
if(warning) {
$(this).addClass('warning');
} else {
alert("form submitted");
}
}
you need to check each one of them with the each function in jquery, or a for loop.
$('#name, #email, #user, #address, #phone').each(function(){
if ($(this).val().length === 0){
$(this).addClass('warning');
} else {
alert("form submitted");
}
});
Here's the same example with a for
var formElements = $('#name, #foo');
for (i = 0 ; i < formElements.length ; i++)
{
if ( $(formElements[i]).val().length === 0 )
$(this).addClass('warning');
else {
alert("form submitted");
}
}
function formSubmit() {
var pass = true;
jQuery.each( jQuery('#form :input'), function( key, value ) {
if(!this.value && jQuery(this).attr('class :contains("required")')) {
if (jQuery(this).siblings('.error').length === 0 && jQuery(this).type != 'submit') {
jQuery(this).after('<label class="error"><span class="form-required">*</span> Required</label>');
}
pass = false;
} else {
jQuery(this).siblings('.error').remove();
}
});
if (pass === true) {
document.getElementById('form').submit();
}
}
Related
Hello I have this function right here:
function formCheck() {
var valid = true;
var error;
resetBorders('.customer-create-form');
$('.customer-create-form :input[required]').each(function() {
if ($(this).val().length == 0) {
valid = false;
error = "* Alle felter skal udfyldes";
$(this).css('border-color', 'red');
}
});
if ($('input[name="postal_code"]').val().length != 0 && !$.isNumeric($('input[name="postal_code"]').val())) {
valid = false;
error = "* Ugyldig post nummer";
$('input[name="postal_code"]').css('border-color', 'red');
}
if (valid == true) {
return true;
} else {
$('.error-firm-settings-1-form').html(error);
}
return false;
}
I want to set this into a function for itself, but when I do it and update the valid to false, the formCheck() does not register it, and it continues. How do I do so it set it to false in the formCheck() function.
if ($('input[name="postal_code"]').val().length != 0 && !$.isNumeric($('input[name="postal_code"]').val())) {
valid = false;
error = "* Ugyldig post nummer";
$('input[name="postal_code"]').css('border-color', 'red');
}
I have some problem when I check the function validation, I need when checking all the cassis is true hide the parent div * errors message *
var error_pass = false;
$('#pass').focusout(function(){
check_pass();
error_pass = false;
if(error_pass !== true){
console.log('its showing!');
}else{
$('.test').fadeOut('522');
}
});
function check_pass() {
var fpass= $('#pass').val();
switch(error_pass = true){
case(fpass.length < 6 ? $('#pass-error-message3').css('color','red'):$('#pass-error-message3').css('color','green') ):
$('#pass-error-message3').show();
case(fpass.search(/(?=.[a-z])(?=.*[A-Z])/) == -1 ? $('#pass-error-message4').css('color','red') : $('#pass-error-message4').css('color','green')):
$('#pass-error-message4').show();
case(fpass.search(/\d/) == -1 ? $('#pass-error-message2').css('color','red'):$('#pass-error-message2').css('color','green')):
$('#pass-error-message2').show();
default:break;
}
}
Use if else statements like this
function validation() {
var error = false;
if (fpass.length < 6) {
error = true;
$('#pass-error-message3').css('color', 'red').show();
} else {
$('#pass-error-message3').css('color', 'green');
}
if (fpass.search(/(?=.[a-z])(?=.*[A-Z])/) == -1) {
error = true;
$('#pass-error-message4').css('color', 'red').show();
} else {
$('#pass-error-message4').css('color', 'green')
}
if(fpass.search(/\d/) == -1){
error = true;
$('#pass-error-message2').css('color','red').show();
}else{
$('#pass-error-message2').css('color','green');
}
if(error === false){
hideParentDiv(); // Here hide the div
}
}
Much cleaner approach
When I submit the form I am checking the validations. If validation true then I need to show confirmation. Currently, it is not showing. When validation true not shown confirmation, the form is submitted.
here is my js code:
$(document).ready(function () {
$('#reason').keyup(function () {
var val = $('#reason').val();
if (val == null || val == "") {
$('#reason_error').html('Please provide a reason.');
validation = false;
} else {
$('#reason_error').html('');
}
});
});
function finishCancelValidate() {
var validation = true;
var val = $('#reason').val();
if (val == null || val == "") {
$('#reason_error').html('Please provide a reason.');
validation = false;
} else {
$('#reason_error').html('');
}
if (validation) {
//alert('hi');
jQuery.confirm({
text: "Do you want to proceed this ?",
confirm: function () {
console.log("You just confirmed.");
return false;
},
cancel: function () {
console.log("You just cancel.");
}
});
} else {
return validation;
}
}
this is form tag :
<form method="post" class="register" action="finishController.php?a=cancel" name="cancel" onsubmit="return finishCancelValidate();" enctype="multipart/form-data">
I got a quick question, on my javascript code I've this:
$('form').submit( function (e) {
var form = $(this);
console.log('submit attempt');
$('input, select, textarea').each(function() {
var attr = $(this).attr('required');
if (typeof attr == typeof undefined || attr == false || (attr = 'Y' && $(this).val() != '') ) {
if($(this).hasClass('numeric')) {
if(isNumber($(this).val())) {
$(form).submit();
}
}
else {
$(form).submit();
}
}
else {
e.preventDefault();
$(this).css('border','1px solid red');
}
});
});
And on console log I got over 1300 messages of 'submit attempt' then an error:
Uncaught RangeError: Maximum call stack size exceeded
Do you guys have any idea why this happens and how to solve it? Maybe some tricky thing about submit() I forgot about ?
If needed more informations please tell me.
Thank you!
If there isn't an error, the form gets submitted with every input or textarea.
So, first loop the fields, define if there is a failure. If not, send it:
$('form').submit(function(e) {
var form = $(this);
var failure = false;
console.log('submit attempt');
$('input, select, textarea').each(function() {
var attr = $(this).attr('required');
if (typeof attr == typeof undefined || attr == false || (attr = 'Y' && $(this).val() != '')) {
failure = true;
$(this).css('border', '1px solid red');
}
if ($(this).hasClass('numeric') && !isNumber($(this).val())) {
failure = true;
$(this).css('border', '1px solid red');
}
});
if (failure) {
e.preventDefault();
}
});
The problem is that you are submitting the form again within a submit calling it recursively. This is how you should do it. if validation fails isValid contains false and stops form from submitting;
$('form').submit(function(e){
var isValid = true;
$('input, select, textarea').each(function() {
var attr = $(this).attr('required');
if (typeof attr == typeof undefined || attr == false || (attr = 'Y' && $(this).val() != '') ) {
if($(this).hasClass('numeric')) {
if(!isNumber($(this).val())) {
isValid = false;
return isValid;
} else {
e.preventDefault();
$(this).css('border','1px solid red');
}
}
}
else {
e.preventDefault();
$(this).css('border','1px solid red');
isValid = false;
return isValid;
}
});
return isValid;
});
I have a jquery password live validation form HERE
This example guides to add proper password and show with red and green sign.
But I am wanting something like when all the conditions of password are successful then popup tool tip will automatically disappear.
How can this possible. I am not good at jquery, any help will be much appreciated.
live JS fiddle link
JS
$(document).ready(function() {
$('input[type=password]').keyup(function() {
// set password variable
var pswd = $(this).val();
if ( pswd.length < 8 ) {
$('#length').removeClass('valid').addClass('invalid');
} else {
$('#length').removeClass('invalid').addClass('valid');
}
//validate letter
if ( pswd.match(/[A-z]/) ) {
$('#letter').removeClass('invalid').addClass('valid');
} else {
$('#letter').removeClass('valid').addClass('invalid');
}
//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
$('#capital').removeClass('invalid').addClass('valid');
} else {
$('#capital').removeClass('valid').addClass('invalid');
}
//validate number
if ( pswd.match(/\d/) ) {
$('#number').removeClass('invalid').addClass('valid');
} else {
$('#number').removeClass('valid').addClass('invalid');
}
});
$('input[type=password]').focus(function() {
// focus code here
});
$('input[type=password]').blur(function() {
// blur code here
});
$('input[type=password]').keyup(function() {
// keyup code here
}).focus(function() {
$('#pswd_info').show();
}).blur(function() {
$('#pswd_info').hide();
});
});
One way would be to count the number of valid rules and when you reach the appropriate number, fade the rules out:
if ($('#pswd_info li.valid').length == 4) $('#pswd_info').fadeOut();
jsFiddle example
This will work inside of your keyup() function:
if(pswd.length >= 8 && pswd.match(/[A-z]/) && pswd.match(/\d/)) {
$('#pswd_info').hide();
}
Updated JSFiddle
Here is a working version (jsfiddle):
$(document).ready(function() {
$('input[type=password]').keyup(function() {
var isValid = true;
// set password variable
var pswd = $(this).val();
if ( pswd.length < 8 ) {
isValid &= false;
$('#length').removeClass('valid').addClass('invalid');
} else {
isValid &= true;
$('#length').removeClass('invalid').addClass('valid');
}
//validate letter
if ( pswd.match(/[A-z]/) ) {
isValid &= true;
$('#letter').removeClass('invalid').addClass('valid');
} else {
isValid &= false;
$('#letter').removeClass('valid').addClass('invalid');
}
//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
isValid &= true;
$('#capital').removeClass('invalid').addClass('valid');
} else {
isValid &= false;
$('#capital').removeClass('valid').addClass('invalid');
}
//validate number
if ( pswd.match(/\d/) ) {
isValid &= true;
$('#number').removeClass('invalid').addClass('valid');
} else {
isValid &= false;
$('#number').removeClass('valid').addClass('invalid');
}
if(isValid){
$('#pswd_info').hide();
}
});
$('input[type=password]').focus(function() {
// focus code here
});
$('input[type=password]').blur(function() {
// blur code here
});
$('input[type=password]').keyup(function() {
// keyup code here
}).focus(function() {
$('#pswd_info').show();
}).blur(function() {
$('#pswd_info').hide();
});
});