CODEWITHSUNDEEP
javascripthtml
user2093306
user2093306

Reputation: 5

HTML form validation with Javascript

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!

Upvotes: 0

Views: 5429

Answers (3)

Lemonade
Lemonade

Reputation: 503

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.

Upvotes: 0

jonhopkins
jonhopkins

Reputation: 3842

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>

Upvotes: 2

Esteve
Esteve

Reputation: 1829

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.

Upvotes: 0

Related Questions