CODEWITHSUNDEEP
javascripthtmlvalidation
Morelka
Morelka

Reputation: 197

Form Validation is not working properly

JavaScript cannot properly validate the form. When the required field is not inputted, rather than displaying an alert box, the browser just loads to the next page as if the user did input the field. 

<head>
<script type="text/javascript">
  function inputValidation() {
    var dateBox= document.forms["form"]["date"].value;
    if (dateBox== null || dateBox== "") {
      alert("Please enter an approximate date.");
      return false;
    }
  }
</script>

</head>
<body>

  <form name="form" id="form" action="add.php" onsubmit="inputValidation()" method="post">
    <fieldset id="contactFields">
      <legend>Client Information</legend><br>
      <p id="require"><span>*</span>Required information</p><br>
      <table width="291" height="158">
        <tr>
          <td>Approximate Date Serviced:<span>*</span></td>
          <td><input type="text" name="date" id="date" size="20" maxlength="25">
        </tr>

        <tr>
          <td>First Name:</td>
          <td><input type="text" name="fName" id="fName" size="20" maxlength="25" /></td>
        </tr>
        <tr>
          <td>Last Name:</td>
          <td><input type="text" name="lName" id="lName" size="20" maxlength="25"/></td>
        </tr>
      </table>
      <label class="blockLabel">Comments:<span>*</span><br><textarea name = "comment" id="comment" rows="5" cols="55"></textarea>

      <label id="wordcountLabel" for="wordcount">
        <div>Character Count:<input type="text" id="wordcount" readonly="readonly" value="0/0"></div>
      </label>
    </fieldset>
    <div id="submit"><input text-align="center" class="button1" type="submit" value="Submit"></div>
    <input text-align="center" class="button3" type="reset" value="Reset" />
  </form>
</body>

Any ideas anyone? Please help!

Upvotes: 0

Views: 142

Answers (2)

Nir Alfasi
Nir Alfasi

Reputation: 53565

Assuming the code was working and only the validation doesn't - my guess is that you wanted something like the following:

onsubmit="return inputValidation()"

Full code:

<head>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
function inputValidation()
{
  var dateBox= document.forms["form"]["date"].value;
  if (dateBox== null || dateBox== "")
  {
      alert("Please enter an approximate date.");
      return false;
  }
  return true;
}
</script>    
</head>
<body>    
<form name="form" id="form" action="add.php" onsubmit="return inputValidation()" method="post">    
  <fieldset id="contactFields">    
  <legend>Client Information</legend><br />    
<p id="require"><span>*</span>Required information</p><br />    
<label class="blockLabel">Approximate Date Serviced: <span>*</span><br/><input type="date" name = "date" id="date"/><br/><br/>
<label class="blockLabel">First Name: <span>*</span><br/><input type="text" name = "firstName" id="firstName"/><br/><br/>
<label class="blockLabel">Last Name: <span>*</span><br/><input type="text" name = "lastName" id="lastName"/><br/><br/>

<label class="blockLabel">Comments:<span>*</span><br/><textarea name = "comment" id="comment" rows="5" cols="55"></textarea>

<label id="wordcountLabel" for="wordcount">
<div>Character Count:<input type="text" id="wordcount" readonly="readonly" value="0/0" /></div>
</label>

</fieldset>
  <div id="submit"><input text-align="center" class="button1" type="submit" value="Submit" /></div>

<input text-align="center" class="button3" type="reset" value="Reset" />
</form>
</body>

Upvotes: 2

Seano666
Seano666

Reputation: 2238

Have you tried debugging with the browser and inspecting the value of dateBox?? I've never seen a form value referenced like that, it might not be getting the value you need.

Upvotes: 1

Related Questions