Javascript Multiple Field/Form Validation

Question

Yes, I know there are many questions on Stacked involving form validation but while some have been very close to what I'm trying to accomplish, I think this is unique.

I have this JS fiddle with this script that I want to use that will return all the fields by name that have not been filled out. I feel this is a much better approach as I was doing this below code to try to accomplish the same result with multiple field validation:

function validate ( )
{
valid = true;

if ( document.contactinfo.Name.value == "" )
{
    alert ( "You need to fill the name field!" );
    valid = false;
}

  if ( document.contactinfo.email.value == "" )
{
    alert ( "You need to fill in your email!" );
    valid = false; //change variable valid to false
}
return valid;
}

While the above works and puts out multiple alert boxes, I manually have to alert them several times on what fields need to be filled out. I'd much rather send out an alert that tells them what fields they are missing in one fell swoop and return the focus to those fields. The JS fiddle script does that, however, I keep getting the error that: ValidateRequiredFields is not defined and I don't see where the issue lies. I've named everything correctly and the form data should be getting passed up.

Any thoughts? As always, ask for clarification if needed. Thanks!

Note: I would not like to use JQuery as I know they have very easy plugins that allow you to set required classes!

neu-rah · Accepted Answer · 2012-11-10 16:49:52Z

5

I dont know about the fiddle error, but about your script there are severall improvements:

you can improve that by collecting all messages into a string and do a single alert

function validate ( ) {
  var valid = true;
  var msg="Incomplete form:\n";
  if ( document.contactinfo.Name.value == "" ) {
    msg+="You need to fill the name field!\n";
    valid = false;
  }
  if ( document.contactinfo.contact_email.value == "" ) {
    msg+="You need to fill in your email!\n";
    valid = false;
  }
  if (!valid) alert(msg);
  return valid;
}

improvement, return focus to first field in error and changing border color of fields with problems:

function validate ( ) {
  var valid = true;
  var msg="Incomplete form:\n";
  if ( document.contactinfo.Name.value == "" ) {
    if (valid)//only receive focus if its the first error
      document.contactinfo.Name.focus();
    //change border to red on error (i would use a class change here...
    document.contactinfo.Name.style.border="solid 1px red";
    msg+="You need to fill the name field!\n";
    valid = false;
  }
  if ( document.contactinfo.contact_email.value == "" ) {
    if (valid)
      document.contactinfo.contact_email.focus();
    document.contactinfo.contact_email.style.border="solid 1px red";
    msg+="You need to fill in your email!\n";
    valid = false;
  }
  if (!valid) alert(msg);
  return valid;
}

now, the above code signals error, return focus to first error and puts red borders on field with error... still we need some improvement. first we need to remove red border once the field is valid.. this could be done with an else on each field check above... however i would be assuming that there is only one error condition for each field, and that might not be the case. ex: email field can check for not empty and for valid email

one way to do that clean is to remove all red border at the beggining and then start validation.

the style.border="..." is only a simplistic way of doing it, i would prefer a class change and a class remove if not on error.

the sugar on top would be:

-we need to remove the red border once the field becomes valid

-Make an array of all fields including names, conditions and messages

Automate the process by cycling the array. That way we could do a cycle for cleaning borders and another to check conditions, ending with a compact and reusable code.

edited Nov 10, 2012 at 16:49

answered Apr 23, 2012 at 23:50

neu-rah

1,69321 silver badges34 bronze badges

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

2 Comments

Brian Over a year ago

Yes, I was thinking in the way you were about concatanating the error message. If I do this (!document.contactinfo.Name.value.match( /^[a-zA-Z- ']+$/ )) then it will work. It's saying if it's NOT matching that format. This also checks if fields are empty. Very convenient for double checking if a field was entered and if it wasn't entered correctly. Thanks for the help.

neu-rah Over a year ago

yes, that or with separate conditions using js or regex as u prefer, i have similar work but i use classes to specify conditions... like "required", "email", "numeric" "complete" "masked", etc.... using like class="required email" combines too conditions

Collectives™ on Stack Overflow

Javascript Multiple Field/Form Validation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related