I need help creating a javascript loop for an object that I am validating. The validation works, it displays the alert, but it does not focus on the field. The reason it will not focus on the field is because that field's id is unique each time the user adds another account. The code is below:
if ((theForm.LinkedAccts.value == "Yes")&&
(document.getElementById('DLAccount').selectedIndex == ""))
{
alert("Please enter the Delink Account number.");
document.getElementById('DLAccount').focus();
return (false);
}
Thanks!
Related
Background:
I'm adding event listeners to a HTML form, that check if the input in each field is valid. For example:
inputElement.addEventListener("input", function(event) {
if (!isValid(input.value)) {
input.setCustomValidity("Input is invalid");
} else {
input.setCustomValidity("");
}
});
However, the form field in question is not mandatory - the user can submit the form with the field empty, but they can't submit it with invalid input.
Problem:
If the user submits the form without ever touching that input (leaving it blank) the "input" event never occurs, and the form can be submitted. (Good)
If the user enters incorrect input and submits the form, they get a warning message "input is invalid". (Good)
But, if they enter invalid input, get the warning message, and then delete the input, the warning message will appear and the form will now submit. (Bad)
This happens because the act of deleting the input triggers the input event.
Progress:
I've tried using the textInput event instead but I get the same behaviour. I've checked for other available events but I can't see one that would fix this problem.
I could make it work by modifying my isValid function to return true if given an empty string, but I'd like to avoid that if possible. The reason being: I've simplified the example here but in reality that function is actually isValidServiceId and technically an empty string is not a valid service id.
You can modify your conditional logic to say "If the input is populated and invalid", rather than just "If the input is invalid"...
inputElement.addEventListener("input", function(event) {
if (input.value.length && !isValid(input.value)) {
input.setCustomValidity("Input is invalid");
} else {
input.setCustomValidity("");
}
});
I have a user config page with many inputs of a form. I want to realtime validate the input to avoid format error when user types in the text input, check filename and pop some info when user types in the select, radio, checkbox input.
I just want to know with method shuold I use for each type input on the above for.
You have to write a logic that will do the validation for you. Once you've written it, you can use keyup event of jquery that will call that function as soon as you type something.
For example, the snippet below will do real time validations as soon as you begin typing. If the typed text consists of only alphabets, then there will be no error (and if there's any, then it will go away) and as soon as you have typed any number, it will show error.
$("#only-text").on("keyup", function() {
realTimeValidate();
});
function realTimeValidate() {
var inputField = document.getElementById("only-text").value;
if(!isAlphaOrParen(inputField))
document.getElementById("showerror").innerHTML = "Please enter only numbers";
else
document.getElementById("showerror").innerHTML = "";
}
function isAlphaOrParen(str) {
return /^[a-zA-Z()]+$/.test(str);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type only Text (error will be generated if you type a number) : <br><input id="only-text" type="text"/><br>
<span id="showerror" style="color:red"></span>
Please imagine this part of a web form. Two checkboxes (with the same name="myCheckbox") and two text inputs. If the first checkbox is checked, the first text input must not be empty. If the second checkbox is checked, the second text input must not be empty. To validate this I use the script below:
// huge validation code above
}else if (!document.myForm.myCheckbox[0].checked && !document.myForm.myCheckbox[1].checked){
jAlert ('Please select one of the two checkboxes!',function(){$(myForm.myCheckbox).focus();});
return false;
}else if (myForm.myCheckbox[0].checked && myForm.myFirstTextInput.value=="") {
jAlert ('You have selected the first checkbox. Please make sure that the first text input is not empty!',function(){$(myForm.myFirstTextInput).focus();});
return false;
}else if (myForm.myCheckbox[1].checked && myForm.mySecondTextInput.value=="") {
jAlert ('You have selected the second checkbox. Please make sure that the second text input is not empty!',function(){$(myForm.mySecondTextInput).focus();});
return false;
// huge validation code below
Everything works just fine. But now, I also want to check if in the first text input the user has entered at least 10 digits. I update my validation code, please see below:
// huge validation code above
}else if (!document.myForm.myCheckbox[0].checked && !document.myForm.myCheckbox[1].checked){
jAlert ('Please select one of the two checkboxes!',function(){$(myForm.myCheckbox).focus();});
return false;
}else if (myForm.myCheckbox[0].checked && myForm.myFirstTextInput.value=="") {
jAlert ('You have selected the first checkbox. Please make sure that the first text input is not empty!',function(){$(myForm.myFirstTextInput).focus();});
return false;
}else if (myForm.myCheckbox[0].checked && myForm.myFirstTextInput.value!=="")
var x = document.getElementById("myFirstTextInput");
var y = x.value;
var totalNrOfDigits = 0;
for(var i = 0; i < y.length; i++){
if(/\d/.test(y[i])){
totalNrOfDigits++;
}
}
if(totalNrOfDigits < 10) {
jAlert ('Please make sure that the first text input contains at least 10 digits!',function(){$(myForm.myFirstTextInput).focus();});
return false;
}else if (myForm.myCheckbox[1].checked && myForm.mySecondTextInput.value=="") {
jAlert ('You have selected the second checkbox. Please make sure that the second text input is not empty!',function(){$(myForm.mySecondTextInput).focus();});
return false;
// huge validation code below
My problem: after I add the check for at least 10 digits, if the users clicks the SECOND check box, then "mySecondTextInput" is no longer validated and the form is submitted. I really don't get it why and already wasted most of may day...
Sorry because I have not added the whole code: It's really huge, it's a pretty complex web form.
In the second code example, you forgot the opening curly bracket on line 11, so only the first statement following the else if condition will be evaluated.
}else if (myForm.myCheckbox[0].checked && myForm.myFirstTextInput.value!=="")
^
|
I'm using a javascript that validates a form by radio buttons being checked, depending on which button is checked I want a value for that button submitted to MySQL but when I select a button it submits the button name to MySQL. changing the name of the button causes the script to stop working. How can I change the script so it allows the button value to post to MySQL instead of the button name?
jsFiddle
function ValidateForm(form) {
ErrorText = "";
if ((form.job_status[0].checked === false) && (form.job_status[1].checked === false)) {
alert("Before you can get a signature you must mark a selection.\n Is the work completed or do you need to return?");
return false;
}
if (ErrorText = "") {
form.submit();
}
}
job_status[0] ,job_status[1] means with name job_status two radio buttons exist.
If you change one of the radio buttons name either of job_status[0] job_status[1] one will exist.So you are getting exception
Instead of doing all that process by default select a radio button.That solves all your problems.I updated the link
see here
I need to validate values of a form only if checkbox is unchecked. If it is checked, I will use values added previously. Now the thing is this or any of these code are not working. As I need to validate these values before I redirecting values to another form.
var ui=document.getElementById('same_info').value;
ui.OnChange = valid;
function valid()
{var frmvalidator = new Validator("myform");
frmvalidator.addValidation("shipping_first_name","alpha_s","please enter your First Name or full name");
frmvalidator.addValidation("shipping_first_name","req","Please enter your First Name");
}
2.
if(!document.myform.same_info.checked)
{ alert('infobox is not checked'); }
I am using Javascript to validate form. Script is fine as it is working perfectly with form elements , whose values are not depending on checking/unchecking of checkbox.
Change:
var ui=document.getElementById('same_info').value;
to
var ui=document.getElementById('same_info');
Also, I'm fairly certain it's onchange, not OnChange -- Javascript is case sensitive.
ui.onchange = valid;
Also note that if the user checks it, and unchecks it, it will still have those validation requirements even though it has been unchecked.