How do I make this HTML form validate using JavaScript?

Question

I'm working with this HTML form, and I am attempting to validate the fields. I would like to check that each field is not empty using JavaScript. If the field is empty, I want the hidden associated div to be displayed.

CURRENT PROBLEM: If both fields are left empty, only the first div is shown for proName and the second is not revealed. How can I make them both appear?

 <html>
 <body>
 <form action="" method="post" class="form" name="form" onsubmit="return validateForm();">
      <p><label for="proName">Processors Name: </label>
           <input type="text" name="proName" id="proName"></p>
                <div id="alertProName" style="display:none;">
                     <p>Please fill in this field</p>
                </div>

      <p><label for="compName">Company Ordered Through: </label>
           <input type="text" name="compName" id="compName"></p>
                <div id="alertCompName" style="display:none;">
                     <p>Please fill in this field</p>
                </div>
 </form>

 <script type="text/javascript">
 function validateForm() {
      var x=document.forms["form"]["proName"].value;                    

      if (x==null || x=="") {
      var s = document.getElementById("alertProName").style.display="block";
      return false;
      }
 };

 function validateForm() {
      var z=document.forms["form"]["compName"].value;                   

      if (z==null || z=="") {
      var a = document.getElementById("alertCompName").style.display="block";
      return false;
      }
 };
 </script>
 </body>
 </html>

Thank you!

Looks like you overcompensated. Now you have two validateForm functions. — j08691
– j08691, Commented Jan 11, 2013 at 20:29

Boundless · Accepted Answer · 2013-01-11 20:29:52Z

3

function validateForm(){
  var valid = true;
  var x=document.forms["form"]["proName"].value;                    
  if (x==null || x=="") {
    document.getElementById("alertProName").style.display="block"; //show the error message
    valid = false;
  }else{
    document.getElementById("alertProName").style.display="none"; // hide the error message
  }
  var z=document.forms["form"]["compName"].value;                   

  if (z==null || z=="") {
    document.getElementById("alertCompName").style.display="block";//show the error message
    valid = false;
  }else{
    document.getElementById("alertCompName").style.display="none"// hide the error message
  }
  return valid; // only if both are valid will we submit
}

answered Jan 11, 2013 at 20:29

Boundless

2,4642 gold badges26 silver badges40 bronze badges

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

1 Comment

Peter Over a year ago

Perfection. I was so close, yet so far away. Thank you very much.

starbeamrainbowlabs · Accepted Answer · 2013-01-11 20:36:40Z

1

Validating a form client side is not a good idea because the client can always bypass it.

However, if you really want to validate a form on the client side, you can use HTML5 form validation:

<input type="text" name="somefield" required />

The required attribute tells the browser the the field is required.

Make sure that you use the HTML5 DOCTYPE (<DOCTYPE HTML>).

Example: http://jsbin.com/ubuqan/1/edit

answered Jan 11, 2013 at 20:36

starbeamrainbowlabs

6,22810 gold badges49 silver badges79 bronze badges

4 Comments

Peter Over a year ago

Both would be preferred, yes? So they can't bypass it and they're notified of what's going on?

Peter Over a year ago

Also, is there anyway to override the required attribute? I would like to avoid using the red

Peter Over a year ago

input:invalid { box-shadow: 0px 0px 3px 0px #336699; }

starbeamrainbowlabs Over a year ago

If I understand you correctly, the only way to truly validate your forms so that the user cannot bypass it is to do it server side in a language such as PHP.

Simon Martin · Accepted Answer · 2013-01-11 20:30:13Z

It would be helpful to see what validateForm() does...
I think it would need to be a wrapper for both validation methods and determine in one call which div's to show. As things stand at the moment if validateProName returns false it won't need to execute validateCompName

I would have it do something like the following, which assigns the values of both validateProName and validateCompName to local variables and then shows their divs if the value is false. You would then simplify your existing methods...

<script type="text/javascript">
function validateForm() {
  var pro= validateProName();
  var comp = validateCompName();
  if (!pro) {
      var s = document.getElementById("alertProName").style.display="block";
  }
  if (!comp) {
      var a = document.getElementById("alertCompName").style.display="block";
  }
}
</script>

Andrew Kloos · Accepted Answer · 2013-01-11 20:31:04Z

0

Why not just combine them into one function.

 <script type="text/javascript">
 function validateForm() {
      var x=document.forms["form"]["proName"].value;                    

      if (x==null || x=="") {
      var s = document.getElementById("alertProName").style.display="block";
      return false;

      var z=document.forms["form"]["compName"].value;                   

      if (z==null || z=="") {
      var a = document.getElementById("alertCompName").style.display="block";
      return false;
      }
 };

Does this achieve what you want?

Andrew

answered Jan 11, 2013 at 20:31

Andrew Kloos

4,6784 gold badges31 silver badges39 bronze badges

Comments

crush · Accepted Answer · 2013-01-11 20:42:35Z

Change your form to this:

<form action="" method="post" class="form" name="form" onsubmit="return validateForm(this);">

Then you just need the one function to display the divs:

<script type="text/javascript">
function validateForm(form) {
    for (e in form.elements) {
        var element = form.elements[e];

        if (element.type == "text") {
            console.log(element.name);
            var elementName = element.name;
            elementName = "alert" + elementName.charAt(0).toUpperCase() + elementName.slice(1);
            var alertElement = document.getElementById(elementName);
            if (alertElement)
                alertElement.style.display = "block";
        }
    }

    return false;
}
</script>

This assumes that anytime you have a text field, it will also have an accompanied DIV with the same name with "alert" prepended.

Collectives™ on Stack Overflow

How do I make this HTML form validate using JavaScript?

5 Answers 5

1 Comment

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related