validate checkbox using javascript

thesoundfreak · August 19, 2009

i'm having trouble to validate checkboxes using javascript [since i'm javascript newbie :'(]

here's my html code:

 
<html> 
<head><title>Add DVD</title></head>
<body> 
<script language="JavaScript"> 
  function VerifyOnSubmit(dForm)
  {
  var reason = "";
  
  
  reason+= validateEmpty(dForm.title, dForm.cost);
  reason+= validateTitle(dForm.title);
  reason+= validateCost(dForm.cost);
  //reason+= validateCheck(dForm.check); this does not return anything
  
  if(reason != "")
  {
	  alert("Some field not filled correctly: \n" + reason);
	  return false;
  }
  return true;
  }
  
  	function validateEmpty(title,cost)
  	{
    	var error = "";

    	if (title.value.length == 0 || cost.value.length == 0) {
        	title.style.background = 'ffffcc';
		cost.style.background = 'ffffcc';
        	error = "The required field has not been filled in.\n"
    	} else {
        	title.style.background = 'White';
		cost.style.background = 'White';
    	}
    return error;  
}

function validateTitle(title)
{
	var error = "";
	var char = /\w/;
	if(char.test(title.value))
	{
		cost.style.background = 'ffffcc';
        	error = "The title field contains illegal characters.\n"
	}
	return error
}

function validateCost(cost)
{
	var error ="";
	if(isNaN(cost.value))
	{
		cost.style.background = 'ffffcc';
		error = "The cost field must be number.\n"
	}
	return error
}
/*
function validateCheck(check)
{
	var error = "";
	for(var i = 0; i < check.length(); i++)
	{
		if(check[i].checked)
		{
			i=99;
			break;
		}
	}

	if(i=99)
	{
		error = "The cost field must be number.\n";
	}
	return error;
}*/
</script>

<center><h1>Add DVD</h1></center> 

<form method="post" action="addDVD.php" OnSubmit="return VerifyOnSubmit(this)">
  <center> 
            Please enter the dvd details here
  </center> 
  <table border = "1" align="center"> 
          <tr> 
                <th width="600">DVD Title*</th>
                <th width="88">Rental Cost*</th> 
                <th width="54">Rating*</th>
                <th width="120">Cover Image</th>
    	  </tr> 
          <tr> 
                <td><input type="text" size="100" name="title" maxlength="100"></td> 
                <td align="right"><input type="text" size="13" name="cost"></td> 
                <td>                
                <select name="ratList">
    										<option value = "1">
						G                        	</option>
										<option value = "3">
						M                        	</option>
										<option value = "4">
						MA15+                        	</option>
										<option value = "2">
						PG                        	</option>
										<option value = "5">
						R18+                        	</option>
										<option value = "6">
						X18+                        	</option>
			             	</select></td>
                <td><input type="text" size="20" name="image" maxlength="20"></td> 
            </tr> 
            </table><br/>
		    <table border = "1" align="center">
             <tr> 
                    <th>DVD Genre*</th>
                    <th> </th>
            </tr>
			<tr>
   			<td>
			action</td>
        	<td><input name="check[]" type="checkbox" value="1"></td>
    		</tr>
			<tr>
   			<td>
			comedy</td>
        	<td><input name="check[]" type="checkbox" value="2"></td>
    		</tr>
			<tr>
   			<td>
			crime</td>
        	<td><input name="check[]" type="checkbox" value="3"></td>
    		</tr>
			<tr>
   			<td>
			drama</td>
        	<td><input name="check[]" type="checkbox" value="4"></td>
    		</tr>
			<tr>
   			<td>
			history</td>
        	<td><input name="check[]" type="checkbox" value="5"></td>
    		</tr>
			<tr>
   			<td>
			horror</td>
        	<td><input name="check[]" type="checkbox" value="6"></td>
    		</tr>
			<tr>
   			<td>
			romance</td>
        	<td><input name="check[]" type="checkbox" value="7"></td>
    		</tr>
			<tr>
   			<td>
			science fiction</td>
        	<td><input name="check[]" type="checkbox" value="8"></td>
    		</tr>
  </table><br/>

  <center> 
    	<input type="submit" value="Add Details"> 
        <input type="reset" value="Clear Details"> 
  </center> 
</form> 

<p align="right"> (*) is required</p>
</body>
</html>

is there anyone that have any solution for checkbox validation?

Adam · August 19, 2009

You need to be testing for the checked property.

Sign In

validate checkbox using javascript

Recommended Posts

thesoundfreak

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information