After successfully creating a function to validate a form, I realized that breaking it down into three separate functions would be more beneficial.
The challenge arose when attempting to return the 'false' message back to the form after splitting the functions. Initially, all errors were caught by various if statements in one big function, but now with functions within a function, getting that 'false' message back became confusing.
Below is the function called by the form submit button and the main function it invokes. Despite trying to use an empty variable as a placeholder for false, assigning it the value false within the validateSignup function did not yield the desired outcome.
function validateSignup()
{
// Declaring Arrays (deleted array contents)
var errorSpansArray=[whatever];
var regexErrorArray=[whatever];
var regexArray=[whatever];
validateText(0,6,errorSpansArray, regexErrorArray, regexArray);
passMatch();
genderCountryCheck()
}
function validateText(formNumber, numberElements, errorSpansArrayName, regexErrorArrayName, regexArrayName)
{
for (x = 0; x<numberElements; x++)
{
var spanName = errorSpansArrayName[x];
var textError = document.getElementById(spanName);
var y=document.forms[formNumber].elements[x];
if (!y.value)
{
errorMessage(0,spanName,x);
return false;
}
if(!regexArrayName[x].test(y.value)){
textError.innerHTML = regexErrorArrayName[x];
return false;
}
}
UPDATE: Appreciate the suggestions provided. I have managed to come up with a solution that seems effective for me.
function validateSignup()
{
// Declaring Arrays (deleted array contents)
var errorSpansArray=[whatever];
var regexErrorArray=[whatever];
var regexArray=[whatever];
var returnValidateText=validateText(0,6,errorSpansArray, regexErrorArray, regexArray);
var returnPassMatch = passMatch();
var returnGenderCountry = genderCountryCheck();
if (returnValidateText || returnPassMatch || returnGenderCountry === false)
{
return false;
}
else{
return true;
}
}