how to add one error instead of multiple errors

Question

Hi I have designed my form now i am unsure how to combine all the alert messages instead of them popping up one at a time , please could someone tell my how to do this in simple terms as i am new to javascript. thankyou in advance. below is my script.

function validateForm() {
// this part of the script will collate all errors into one should the user leave an input blank
var Fname=document.forms["myForm"]["fname"].value;
var Lname=document.forms["myForm"]["lname"].value;
var address=document.forms["myForm"]["addr1"].value;
var postcode=document.forms["myForm"]["pcode"].value;
var email=document.forms["myForm"]["email"].value;
var number=document.forms["myForm"]["tel"].value;
var date=document.forms["myForm"]["mydate"].value;
if (Fname==null || Fname=="" ||Lname==null || Lname=="" ||address==null || address=="" ||!postcode||!email||!number||( myForm.sex[0].checked == false ) && ( myForm.sex[1].checked == false )||(myForm.age[0].checked == false )&&(myForm.age[1].checked == false )&&(myForm.age[2].checked == false )&&(myForm.age[3].checked == false )&&(myForm.age[4].checked == false )||!date)
  {
  alert("Please make sure all fields are filled or checked correctly out ");
  return false;
  } 
  //end of collating script
  //start of postcode script
 var regPostcode = /^[a-zA-Z]{1,2}\d[\dA-Za-z]? \d[a-zA-Z]{2}$/;
if (!postcode.match(regPostcode))
{
    alert("That Post Code is incorrect, correct way mk4 4tr");
    return false;
}
//end of postcode script
//start of email script
var regEmail =/^\S+@\S+\.\S+$/;

if (!email.match(regEmail))
{
    alert("That email is incorrect");
    return false;
}


// end of email script
// start of phone number script
 var phonestring = /^(?:0|\+44)[12378]\d{8,9}$/;
if (!number.match(phonestring))
{
    alert(" incorrect,correct format 01908234874");
    return false;
}
// end of phone script
//start of gender script

if ( ( myForm.sex[0].checked == false ) && ( myForm.sex[1].checked == false ) ) 
{
alert ( "Please choose your Gender: Male or Female" ); 
return false;
}
// end of gender script
//start of age group script
if((myForm.age[0].checked == false )&&(myForm.age[1].checked == false )&&(myForm.age[2].checked == false )&&(myForm.age[3].checked == false )&&(myForm.age[4].checked == false )){
alert("please select an age group");
return false;
}
// end of age script
//start of datefield
var dateformat=/^(?:(?:31\/(?:0[13578]|1[02])|(?:29|30)\/(?:0[13-9]|1[012])|(?:0[1-9]|1\d|2[0-8])\/(?:0[1-9]|1[0-2]))\/[2-9]\d{3}|29\/02\/(?:[2-9]\d(?:0[48]|[2468][048]|[13579][26])|(?:[2468][048]|[3579][26])00))$/;
if (!date.match(dateformat))
{
    alert("format incorrect use dd/mm/yyyy make sure you are entering correct days to the month remember 30 days have september, april, june & november, only 28 days in february unless leap year next is 2016");
    return false;
}
var today = new Date();

var courseYear =date.substr(6,4) // use substr or substring to capture the last four digits
var courseMonth =date.substr(3,2) // use substr or substring to capture the four and fifth digits
var courseDay = date.substr(0,2)//e the first and second digits

var dateToCompare = new Date(courseYear, courseMonth, courseDay);

if (dateToCompare < today) {
alert("this date is in the past"); 
return false; }

//end of date field
else
{ alert(" Thank you a member of our team will get back to you shortly");

return true;}
}

Store all your messages in an array of strings instead of alerting them. After validating you can use that to display a message instead. — Chris Pfohl
– Chris Pfohl, Commented Jun 24, 2013 at 14:38

Brad Christie · Accepted Answer · 2013-06-24 14:40:25Z

2

create some kind of collection that you can append to and instead of alerting independantly, just add them to the set. Something like:

function validateForm(){
  var errors = []; // new array to hold all the errors

  /*
    validation code that instead of
      alert('error')
    use
      errors.push('error');
    Also remove any premature `return` statements and
    leave them until the end.
  */

  // next check if there are errors
  if (errors.length > 0){
    // display them
    alert('Following errors found:\n- ' + errors.join('\n- '));

    // also return false to flag there was a problem
    return false;
  }

  // if we reached this code there were no errors
  return true;
}

answered Jun 24, 2013 at 14:40

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mplungjan · Accepted Answer · 2013-06-24 15:02:59Z

1

Add all your errors to an array and then alert them at the end, if any exist:

function validateForm() {
  var errors = []; //array for holding errors
  .
  .
  .

  if (Fname==null || Fname=="" ||Lname==null || Lname=="" ||address==null || address=="" ||!postcode||!email||!number||( myForm.sex[0].checked == false ) && ( myForm.sex[1].checked == false )||(myForm.age[0].checked == false )&&(myForm.age[1].checked == false )&&(myForm.age[2].checked == false )&&(myForm.age[3].checked == false )&&(myForm.age[4].checked == false )||!date) {
    errors.push("Please make sure all fields are filled or checked correctly out "); //add error
  } 
  //end of collating script
  //start of postcode script
  var regPostcode = /^[a-zA-Z]{1,2}\d[\dA-Za-z]? \d[a-zA-Z]{2}$/;
  if (!postcode.match(regPostcode)) {
    errors.push("That Post Code is incorrect, correct way mk4 4tr"); //add error
  }
  //end of postcode script
  //start of email script
  var regEmail =/^\S+@\S+\.\S+$/;

  if (!email.match(regEmail)) {
    errors.push("That email is incorrect"); //add error
  }

  if(errors.length > 0) {
    alert('The following errors occurred: ' + errors.join('\n')); //alert errors if they exist
    return false;
  }
  return true; // allow submit
}

edited Jun 24, 2013 at 15:02

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Jun 24, 2013 at 14:39

colestrode

10.7k3 gold badges32 silver badges43 bronze badges

6 Comments

Brad Christie Over a year ago

Intermediate return statements need to be removed.

Brad Christie Over a year ago

@musefan: constructive criticism is often more appreciated than "nope". Otherwise the SO would be filled with "How do i...i tried..." questions surrending "Nope, try again" answers. ;-)

colestrode Over a year ago

@BradChristie Thanks, I missed the return statements. I removed them and added one return at the end if there are errors

musefan Over a year ago

@BradChristie: That actually sounds like a good place to me. I am getting tired of being appreciated, I want to be feared! ....besides, I like to think cfs could have worked out the mistake for himself, even if just by reading your answer

mplungjan Over a year ago

You still need to return true at the very end. Some browsers will not like a return without a true

|

Collectives™ on Stack Overflow

how to add one error instead of multiple errors

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related