Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML JavaScript

validation using checkbox

Javascript coding ..

Moderators: macek, egami, gesf

validation using checkbox

Postby nehakarnatak » Tue Oct 09, 2012 8:52 pm

hi,
can any body please help me to apply this validation in more than one text box i can do it with 1 text box but cant do it with two text boxes
thanx

here is my code

-------------------------------------------------------------------
<script language="javascript">
function validateArea(frm){
if (frm.chk1.checked && frm.txt1.value==""){
alert('You must fill in this field');
frm.txt1.focus();
return false;
}
return true;
}
</script>
<form onSubmit="return validateArea(this)">
<input type="text" name="txt1" disabled="disabled" />
<input type="checkbox" name="chk1" id="chk1" onClick="this.form.txt1.disabled=!this.checked;" /><label for="chk1">Enable</label>

<input type="submit" name="btnSubmit" value="Submit" />
</form>

-----------------------------------------------------

please help me




--------------------------------------------------------------
nehakarnatak
New php-forum User
New php-forum User
 
Posts: 11
Joined: Tue Feb 28, 2012 10:06 pm

Re: validation using checkbox

Postby seandisanti » Tue Oct 16, 2012 1:12 pm

Here's a jquery solution. On the submit event of the form, each input field is examined, and if it is enabled and blank, an error is returned.



Code: Select all
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#theform").submit(function(){
   $("input[type='text']").each(function(){
      if ($(this).attr("disabled")!="disabled" && $(this).attr("value")==""){alert("This field cannot be blank");}
   });
  });
});
</script>
<form id="theform">
<input type="text" name="txt1" disabled="disabled" />
<input type="checkbox" name="chk1" id="chk1" onClick="this.form.txt1.disabled=!this.checked;" /><label for="chk1">Enable</label><br />
<input type="text" name="txt2" disabled="disabled" />
<input type="checkbox" name="chk2" id="chk1" onClick="this.form.txt2.disabled=!this.checked;" /><label for="chk2">Enable</label><br />

<input type="submit" name="btnSubmit" value="Submit" />
</form>

Jquery is pretty awesome, learn more at w3schools.com or jquery.com
seandisanti
php-forum Fan User
php-forum Fan User
 
Posts: 838
Joined: Mon Oct 01, 2012 12:32 pm

Please check for me why this form is not validating

Postby ebenezerdodoo » Fri Apr 26, 2013 3:15 am

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"/>

<title>Registration form example</title>
</head>
<body>
<script type="text/javascript">
/* <![CDATA[ */

var errpresent = false;

function validateForm(){

runnerid_validate()
runnerid_validate()
eventid_validate()
date_validate()
fintime_validate()
position_validate()
category_validate()
agegrade_validate()

if (errpresent == true){
alert("Please correct the highlighted errors");
return false;

}
}

// Add error message to invalid data entry

function addMessage(id, text)

{

var textNode = document.createTextNode(text);

var element = document.getElementById(id);

element.appendChild(textNode);

}

// Runner ID Validate

function runnerid_validate()

{

var RunnerID = document.getElementById('RunnerID').value;

var test_expression = /[0-9]+/



if (RunnerID.length >0){

if (test_expression.test(RunnerID)) {

return true;

}

else {

addMessage("runiderr","Must be a number in the range 1-99999");

document.getElementById('runiderr').style.background="yellow";

errpresent =true;

return false;

}

}

else {

addMessage("runiderr","Please enter your Runner ID");

document.getElementById('runiderr').style.background="yellow";
errpresent =true;

return false;

}



}

// Event ID Validate

function eventid_validate()

{

var EventID = document.getElementById('EventID').value;

var test_expression = /[0-9]+/

if (EventID.length >0){

if (test_expression.test(EventID)) {

return true;

}

else {

addMessage("evtiderr","Must be a number in the range 1-99999");

document.getElementById('evtiderr').style.background="yellow";
errpresent =true;

return false;

}

}

else {

addMessage("evtiderr","Please enter the Event ID");

document.getElementById('evtiderr').style.background="yellow";
errpresent =true;

return false;

}

}
// DATE Validate

function date_validate()

{

var Date = document.getElementById('Date').value;

var test_expression = /^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/

if (Date.length >0){

if (test_expression.test(Date)) {

return true;

}

else {

addMessage("dateerr","Date must be in yyyy-mm-dd format");

document.getElementById('dateerr').style.background="yellow";
errpresent =true;

return false;

}

}

else {

addMessage("dateerr","Please enter a date in yyyy-mm-dd format");

document.getElementById('dateerr').style.background="yellow";
errpresent =true;

return false;

}

}

// Finish Time Validate

function fintime_validate()

{

var FinishTime = document.getElementById('FinishTime').value;

var test_expression = /^(?:(?:(\d+):)?(\d+):)?(\d+)/



if (FinishTime.length >0){

if (test_expression.test(FinishTime)) {

return true;

}

else {

addMessage("fintimerr","must be in hh:mm:ss format");

document.getElementById('fintimerr').style.background="yellow";
errpresent =true;

return false;

}

}

else {

addMessage("fintimerr","Please enter a Finish Time in hh:mm:ss format");

document.getElementById('fintimerr').style.background="yellow";
errpresent =true;

return false;

}



}
// Position Validate

function position_validate()

{

var Position = document.getElementById('Position').value;

var test_expression = /[0-9]+/

if (Position.length >0){

if (test_expression.test(Position)) {

return true;

}

else {

addMessage("poserr","Must be a number in the range 1-99999");

document.getElementById('poserr').style.background="yellow";
errpresent =true;

return false;

}

}

else {

addMessage("poserr","Please enter your Position");

document.getElementById('poserr').style.background="yellow";
errpresent =true;

return false;

}



}

// Category Validate

function category_validate()

{

var CategoryID = document.getElementById('CategoryID').value;

var test_expression = /[0-9]+/



if (CategoryID.length >0){

if (test_expression.test(CategoryID)) {

return true;

}

else {

addMessage("caterr","Must be a number in the range 1-99");

document.getElementById('caterr').style.background="yellow";
errpresent =true;

return false;

}

}

else {

addMessage("caterr","Please enter your Category ID");

document.getElementById('caterr').style.background="yellow";
errpresent =true;

return false;

}



}

// Age Grade Validate

function agegrade_validate()

{

var AgeGrade = document.getElementById('AgeGrade').value;

var test_expression = /^\s*-?\d+(\.\d{1,2})?\s*/



if (AgeGrade.length >0){

if (test_expression.test(AgeGrade)) {

return true;

}

else {

addMessage("ageerr","Must be a number with two decimal places");

document.getElementById('ageerr').style.background="yellow";
errpresent =true;

return false;

}

}

else {

addMessage("ageerr","Please insert Age Grade");

document.getElementById('ageerr').style.background="yellow";
errpresent =true;

return false;

}

}

/* ]]> */
</script>
</head>

<body>

<h1>Submit Runner Time</h1>

<form name="demo" method="post" ONSUBMIT= return "validateForm()" action="http://mct.tt284.open.ac.uk/b2files/storedata.php">

<table>
<!-- runner id should not be empty and should be a number not a string -->

<tr><td>
Runner Id:

</td><td>

<input type="text" name="RunnerID" id="RunnerID" size="5" maxlength="5"/></td>

<td><p id="runiderr"></p></td></tr>

<!-- event id should not be empty and should be a number not a string -->

<tr><td>
Event Id:

</td><td>

<input type="text" name="EventID" id="EventID" size="5" maxlength="5"/>

</td>

<td><p id="evtiderr"></p></td>

</tr>

<!-- date should not be empty and should be in yyyy-mm-dd format -->

<tr><td>

Date:

</td><td>

<input type="text" name="Date" id="Date" size="10" maxlength="10"/>

</td>

<td><p id="dateerr"></p></td>

</tr>

<!-- finish time should not be empty and should be in hh:mm:ss format -->
<tr><td>

Finish Time:

</td><td>

<input type="text" name="FinishTime" id="FinishTime" size="10" maxlength="10"/>

</td>

<td><p id="fintimerr"></p></td>

</tr>

<!-- position should be a number -->

<tr><td>

Position:

</td><td>

<input type="text" name="Position" id="Position" size="5" maxlength="5"/>

</td>
<td><p id="poserr"></p></td>

</tr>

<!-- category should be a number in the reang 1-100 -->
<tr><td>

Category:

</td><td>

<input type="text" name="CategoryID" id="CategoryID" size="3" maxlength="3"/>

</td>

<td><p id="caterr"></p></td>

</tr>

<!-- agegrade should be a number -->

<tr><td>

Age Grade:

</td><td>

<input type="text" name="AgeGrade" id="AgeGrade" size="5" maxlength="5"/>

</td>

<td><p id="ageerr"></p></td>

</tr>

<!-- personal best can be yes or no -->

<tr><td>

Personal Best:

</td><td>

<input name="PB" type="radio" value="0" checked="checked"> No

<input name="PB" value="1" type="radio"> Yes

</td>

<td><p id="pberr"></p></td>

</tr>

</table>

<input type="submit" value="Submit form" >

<p id ="errorMessage">

</p>

</form>

</body>

</html>
ebenezerdodoo
New php-forum User
New php-forum User
 
Posts: 5
Joined: Fri Apr 19, 2013 2:59 am
Location: GERMANY


Return to JavaScript

Who is online

Users browsing this forum: Yahoo [Bot] and 1 guest

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.