Conditional validation of input fields in JavaScript
I am currently working on a project that requires me to perform javascript form validation on a form containing conditional input fields (visitor can choose whether to register via user number or email). Both input fields are separate and I need to do the following:
If the visitor chooses to login via parameter A (user number), the validation should only consider the ID of the input field A (user number) and does not require validation for the other field (email address).
Conversely, if the visitor selects option B.
The code I am using to check:
function empty() {
var x;
x = document.getElementById("user_number").value;
if (x == "") {
MsgBox('Your user number is required.', 'ERROR');
return false;
}
var y;
y = document.getElementById("email").value;
if (y == "") {
MsgBox('Your email address is required.', 'ERROR');
return false;
}
}
And the trigger event of the form:
<form method="POST" id="accordion-top-form" action="" onsubmit="return empty();">
I need to unwrap the current script to check if field A or field B was filled when the form was submitted (and then automatically disable validation for another field).
How to do it?
source to share
Sounds like that would be enough?
I personally would not call the function empty since you want to return true to allow dispatch
function empty() {
var x = document.getElementById("user_number").value,
y = document.getElementById("email").value;
x = x?x.trim()|| ""; // handle null and all blanks
y = y?y.trim()|| "";
if (x === "" && y === "") {
alert("Please enter user number or email")
return false;
}
// optional
if (x && y) { // both entered
alert("Please enter EITHER user number or email")
return false;
}
if (x) return isValidUser(x); // each of these functions needs to return boolean
if (y) return isValidEmail(y);
// likely not going to happen
return false;
}
source to share
You can use the following:
var forms = {
user: 0,
email: 1
};
function whichForm() {
var userForm = document.getElementById("user_number").value;
var emailForm = document.getElementById("email").value;
if (userForm && emailForm) {
//user wrote in both forms, something is wrong
} else if (!userForm && !emailForm) {
//user didn't fill in any form
} else {
return userForm ? forms.user : forms.email;
}
}
function empty(form) {
if (form === forms.user) {
// check if the user number form is empty
var userForm = document.getElementById("user_number").value;
if(userForm.trim() === "") {
// possibly do more validation
// return true or false based on whether you want to submit
}
} else if (form === forms.email) {
// check if the email form is empty
var emailForm = document.getElementById("email").value;
if(emailForm.trim() === "") {
// possibly do more validation
// return true or false based on whether you want to submit
}
} else {
// something is wrong, invalid parameter,
// handle here
return false
}
}
function validate() {
return empty(whichForm());
}
And change the form to call return validate()
inline or just validate
as a submit handler.
source to share
Suggested solution: Check which of the two input fields is filled in:
var inputA = document.getElementById('A').value;
var inputB = document.getElementById('B').value;
if ((inputA !== "") || (inputA !== NaN) || (inputA !== undefined)) {
//execute code for the user number
}
else if ((inputB !== "") || (inputB !== NaN) || (inputB !== undefined)) {
//execute code for the email
}
else {
//display an error saying none of the two fields were used
}
Recommendation: Most websites will only use one login because it looks much cleaner. And the seat owner text can tell the user what input parameters he should enter:
<input type="text" id="input1" placeholder="user number or email">
Suggested solution: Check if a custom symbol has a symbol @
:
var input1 = document.getElementById("input1").value;
var emailInput = input1.includes('@');//returns a boolean with a value of true
//if '@' was found in the string input1
if (emailInput) {
//execute the code for the email input
} else {
//execute the code for the userID input
}
Explanation:
I assumed you want to use the same input field inside the tag <form ...>
, regardless of whether the user is using an email address or a login ID number. From this, what I thought was the most logical was to simply find something that is unique to one of these inputs and base your code's logic on whether or not that unique element existed in the input file.
AKA, since emails always have a character @
, checking whether it exists in the provided string or not should be sufficient to verify if the user has used an email address or ID to log in.
Let me know if it helped :).
source to share