Form validation with Jquery not behaving as expected - javascript

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();
});
});

Related

jQuery - Validation

I'm having an issue with my validation process. I'm not using a standard "submit" button, rather I have <span class="button" id="print">Print</span> and jQuery listens for a click. This is the validation code I have when that "button" is clicked:
var validation = "";
function validate() {
$("#servDetails").find("input").each(function () {
if ($(this).prop("required") && $(this).val() == "") {
validation = false;
}
else {
validation = true;
}
});
$("#checklist").find("input[required]").each(function () {
if ($(this).prop("required") && $(this).val() == "") {
validation = false;
}
else {
validation = true;
}
});
}
$("#print").on("click", function() {
validate();
if (validation == false) {
alert("Please fill out all required inputs!");
return false;
}
else {
window.print();
}
});
If I click the button without filling anything out (all items blank), I get my alert as expected.
If I fill out all of the required elements, it pulls up the print dialouge as expected.
However, if I leave some of the boxes blank while others are correctly filled, it still goes to print instead of giving me the alert like I need. Any thoughts?
The code have to be rewritten, or better replace it with any validation plug-in.
But in your case, I suppose, you just forgot to return, in case you found some not filled field. So if you have any filled input it override your validation variable.
The simplest solution is to remove
else {validation = true;} code blocks, and add
validation = true;
at the beggining of the function.

jQuery multiple inputs with one Function RegExp

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
}
});

jQuery if statement for 2 variables using val() and keyup()

So I am trying to create a script that will display certin message and the button after users inserts specific numbers into #ninja_forms_field_88. So basically, if the zipcode is 60515 display yes + button, if not display no and no button.
So I got it to work if the var is 1 to (yes) any other one (no)
Now, since this willbe a zipcode validator I need to makes sure I can insert more than one unique number - I've tried doing new Array [1,2,3]; but no success and to check it with zipCode == inputZip, I've tried using inArray but w/o success.
Here is the code:
<script>
jQuery(document).ready(function() {
jQuery("#ninja_forms_field_88").keyup(function() {
var zipCode = 1;
var inputZip = jQuery("#ninja_forms_field_88").val();
if (jQuery.inArray("zipCode") == inputZip) {
jQuery("#yes").css("display", "block");
jQuery("#no").css("display", "none");
jQuery("#ninja_forms_field_90").css("display", "block");
}
else {
jQuery("#no").css("display", "block");
jQuery("#yes").css("display", "none");
jQuery("#ninja_forms_field_90").css("display", "none");
}
});
});
You need to check the zip code to make sure its valid. You can use a regular expression to do this.
Something like this should work:
jQuery(document).ready(function() {
jQuery("#ninja_forms_field_88").keyup(function() {
var zipCode = 1;
var inputZip = jQuery("#ninja_forms_field_88").val();
if (/(^\d{5}$)|(^\d{5}-\d{4}$)/.test(inputZip)) {
jQuery("#yes").html(inputZip);
jQuery("#yes").css("display", "block");
jQuery("#no").css("display", "none");
jQuery("#ninja_forms_field_90").css("display", "block");
}
else {
jQuery("#no").css("display", "block");
jQuery("#yes").css("display", "none");
jQuery("#ninja_forms_field_90").css("display", "none");
}
});
});
You can see it working here: https://jsfiddle.net/vt1rgn21/1/
Hope that helps!
Well you have a few syntax errors with the jQuery functions, in terms of your array and assumption it would output a boolean. You can also minimize a lot of your code. Lastly here is a working fiddle version: https://jsfiddle.net/Zachary1748/77h44jne/
jQuery(document).ready(function($) {
$("#ninja_forms_field_88").keyup(function() {
var zipCode = ["1", "2", "3"];
var inputZip = $("#ninja_forms_field_88").val();
if ($.inArray(inputZip, zipCode) !== -1) {
$("#yes, #ninja_forms_field_90").show();
$("#no").hide();
} else {
$("#no").show();
$("#yes, #ninja_forms_field_90").hide();
}
});
});

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 != ""){}

JavaScript Echo Var Within Double Quote

Okay,
Another novice type question.
I have this array within the head section on my website and want to use it inline JavaScript:
var MyVariable = {"chkboxid":"chkbox"}
chkboxid is a id of a checkbox input.
Now, while validating the checkbox input on form submit, neither this works
$("form#myform").submit(function () {
if ($(MyVariable.chkboxid).is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
Nor This (check the double quote at the variable)
$("form#myform").submit(function () {
if ($("MyVariable.chkboxid").is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
However, if I hardcode the checkbox input id, it works. I mean "input#chkbox" in place of MyVariable.chkboxid.
$("form#myform").submit(function () {
if ($("input#chkbox").is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
How can I use that variable instead of hard coding the input id?
You are missing the "#" before the ID:
$("form#myform").submit(function () {
var element = $("#" + MyVariable.chkboxid)
if (element.is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
}
Note however that chkboxid is the key, the actual ID of the checkbox should be the value:
var MyVariable = {"chkboxid": "real_id_here"}
please check below code.hope it will work
$("form#myform").submit(function () {
if ($("#chkboxid").is("checked")) {alert("checked");
} else {
alert("not checked");
}
});
thanks,Ripa Saha

Categories