HTML form validation with Javascript

Question

im a bit new using javascript in HTML. I want to validate a HTML script using javascript however what i've written doesn't seem to work. Can anyone tell me where I'm going wrong??? Here is the Javascript:

<script type="text/javascript">
function mandatoryFields()
{
var x=document.forms["add"]["contract_id"].value
if (x==null || x=="")
  {
  alert("Please Enter the Contract Title");
  return false;
  }
var x=document.forms["add"]["storydiv"].value
if (x==null || x=="")
  {
  alert("Please Enter a Sprint");
  return false;
  }
var x=document.forms["add"]["storydiv"].value
if (x==null || x=="")
  { 
  alert("Please Enter a Story");
  return false
  }        
var x=document.forms["add"]["date1"].value
if ( x=="" || x==null) 
  { 
  alert("Please Enter a time");
  return false
  }  

</script>

And here is the corresponding HTML script

<form name="add" action="time-sheet/insert-time-sheet.php" method="post" onsubmit="return mandatoryFields()">
<table width="500" border="0" align="center" cellpadding="2" cellspacing="2">
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td width="150">Select Date:</td>
    <td width="336"><input name="date" type="text" value="YYYY-MM-DD" maxlength="100" class="datepick" id="date1" /></td>
  </tr>
  <tr>
    <td>Contract:</td>
    <td><SELECT NAME="contract_id" onChange="getSprint(this.value)"><OPTION VALUE=0>--- Select Contract ---<?php echo $options_contract?></SELECT></td>
  </tr>
  <tr>
    <td>Sprint:</td>
    <td><div id="sprintdiv"><select name="sprint" >
    <option>--- Select Sprint ---</option>
        </select></div></td>
  </tr>
  <tr>
    <td>Story:</td>
    <td><div id="storydiv"><select name="story">
    <option>--- Select Story ---</option>
        </select></div></td>
  </tr>
  <tr>
    <td>Dev Time:</td>
    <td><input name="dev_time" size="20" onkeyup="ondalikSayiKontrol(this)" /></td>
  </tr>
  <tr>
    <td>PM Time:</td>
    <td><input name="pm_time" size="20" onkeyup="ondalikSayiKontrol(this)"/></td>
  </tr>
  <tr>
    <td colspan="2"><table width="182" border="0" align="center" cellpadding="2" cellspacing="2">
      <tr>

        <td width="68"><input name="Submit" type="submit" id="Submit" value="Add Time Sheet" /></td>
        <td width="48"><label>
          <input type="reset" name="reset" value="Reset" />
        </label></td>
        <td width="46"><div align="center"><a href="javascript:history.go(-1);">Back</a></div></td>
      </tr>
      <input type="hidden" name="day" value="<?php echo $day; ?>" />
      <input type="hidden" name="employee_id" value="<?php echo $employee_id; ?>" />
    </table></td>
    </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>
</form>

Thanks in advance!

validate "HTML script"??u mean validate controls on html page rite? — iJade
– iJade, Commented Mar 26, 2013 at 14:19
Use your browser's javascript console to see the error log and paste it back here. — alf
– alf, Commented Mar 26, 2013 at 14:20
Tried using the brower's javascript console and nothing appears — user2093306
– user2093306, Commented Mar 26, 2013 at 14:29

jonhopkins · Accepted Answer · 2013-03-26 14:27:33Z

You're missing the closing brace on the function. If you check the error console on your browser, it will most likely tell you mandatoryFields() is undefined. Adding the closing brace will fix that. You should also return true if none of the validation fails. One last thing is that you re-declare x before each if. Not sure if it produces an error but still should be fixed.

<script type="text/javascript">
function mandatoryFields()
{
    var x=document.forms["add"]["contract_id"].value;
    if (x==null || x=="")
    {
        alert("Please Enter the Contract Title");
        return false;
    }
    x=document.forms["add"]["storydiv"].value;
    if (x==null || x=="")
    {
        alert("Please Enter a Sprint");
        return false;
    }
    x=document.forms["add"]["storydiv"].value;
    if (x==null || x=="")
    { 
        alert("Please Enter a Story");
        return false;
    }
    x=document.forms["add"]["date1"].value;
    if ( x=="" || x==null) 
    {
        alert("Please Enter a time");
        return false;
    }
    return true; // ADD THIS
} // ADD THIS
</script>

Esteve · Accepted Answer · 2013-03-26 14:24:23Z

0

Your madatoryFields() function is not returning true when all fields are right.

from here:

If the event handler is called by the onsubmit attribute of the form object, the code must explicitly request the return value using the return function, and the event handler must provide an explicit return value for each possible code path in the event handler function.

answered Mar 26, 2013 at 14:24

Esteve

1,82919 silver badges23 bronze badges

1 Comment

user2093306 Over a year ago

Changes made yet the Javascript still not working on the HTML script

Lemonade · Accepted Answer · 2013-03-26 14:50:56Z

Get the right elements and perform a loop on the options inside of sprint and story. You can use the name of your form and the names of your select boxes to access the elements straight forward.

var x = document.add.contract_id.value;
if(){
 ... your stuff here
}

You can also access the first form without using its name attribute.

x = document.forms[0].contract_id.value;

For sprint loop through possible options and make your alert then.

x = document.add.sprint;
var selected = false;
for (i = 0; i < x.length; ++i){
   if (x.options[i].selected == true)
      selected = true;
}
if(!selected){
   alert("Select a story please!");
   return false;
}

x = document.add.story;
selected = false;
// same procedure

You can also access the elements via getElementByID() and getElementsByTagName(), the latter returns an array of all matched elements.

document.getElementById('storydiv').getElementsByTagName('story')[0];

document.getElementsByTagName('contract_id')[0];

And dont redeclare var x in every validation step.

Collectives™ on Stack Overflow

HTML form validation with Javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related