Javascript多字段/表单验证

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!

Answer 1

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.