JavaScript - Have Text Field Validation Need To Add Checkbox Validation

Hi All

I am not a genius when it comes to javascript so if anyone could help, I would really be grateful.

scenario:

I am creating a custom product (75g) which will be made up of 3 others products (25g + 25g + 25g). The 3 options will be made up of a combination of smaller products each with their own options (25g, 50g, 75g) which will allow the customer to have one of each or fill up all 3 with just one type.

Here is what I have in code already:

Code:

<div class="wrapperAttribsOptions">
<h4 class="optionName back">Organic Sour Worms</h4>
<div class="back">
<input name="id[14][48]" value="48" id="attrib-14-48" type="checkbox"><label class="attribsCheckbox" for="attrib-14-48">25g</label><br>
<input name="id[14][49]" value="49" id="attrib-14-49" type="checkbox"><label class="attribsCheckbox" for="attrib-14-49">50g</label><br>
<input name="id[14][50]" value="50" id="attrib-14-50" type="checkbox"><label class="attribsCheckbox" for="attrib-14-50">75g</label><br>
</div>
<br class="clearBoth">
</div>

<br class="clearBoth">

<div class="wrapperAttribsOptions">
<h4 class="optionName back">Organic Sugar Bears</h4>
<div class="back">
<input name="id[15][51]" value="51" id="attrib-15-51" type="checkbox"><label class="attribsCheckbox" for="attrib-15-51">25g</label><br>
<input name="id[15][52]" value="52" id="attrib-15-52" type="checkbox"><label class="attribsCheckbox" for="attrib-15-52">50g</label><br>
<input name="id[15][53]" value="53" id="attrib-15-53" type="checkbox"><label class="attribsCheckbox" for="attrib-15-53">75g</label><br>
</div>
<br class="clearBoth">
</div>

<br class="clearBoth">

<div class="wrapperAttribsOptions">
<h4 class="optionName back">Organic Fruit Cocktail</h4>
<div class="back">
<input name="id[16][54]" value="54" id="attrib-16-54" type="checkbox"><label class="attribsCheckbox" for="attrib-16-54">25g</label><br>
<input name="id[16][55]" value="55" id="attrib-16-55" type="checkbox"><label class="attribsCheckbox" for="attrib-16-55">50g</label><br>
<input name="id[16][59]" value="59" id="attrib-16-59" type="checkbox"><label class="attribsCheckbox" for="attrib-16-59">75g</label><br>
</div>
<br class="clearBoth">
</div>

<br class="clearBoth">

<div class="wrapperAttribsOptions">
<h4 class="optionName back">Organic Jelly Bears</h4>
<div class="back">
<input name="id[17][57]" value="57" id="attrib-17-57" type="checkbox"><label class="attribsCheckbox" for="attrib-17-57">25g</label><br>
<input name="id[17][58]" value="58" id="attrib-17-58" type="checkbox"><label class="attribsCheckbox" for="attrib-17-58">50g</label><br>
<input name="id[17][60]" value="60" id="attrib-17-60" type="checkbox"><label class="attribsCheckbox" for="attrib-17-60">75g</label><br>
</div>
<br class="clearBoth">
</div>

What I need to do is to some how ensure that the product is filled with 75g worth of the other products.
Another option may to not use the 'grams' but rather use the 3 compartments that will be filled so 25g = 1, 50g = 2, 75g = 3 etc.

Note: Name, Values, Ids are made dynamically by the cart, and I cannot change those as they are used for adding to cart and updating account info etc.

PLEASE PLEASE PLEASE if anyone can help, I would really appreciate it.

-----------------------------
Jay

I have a simple html form with 2 text fields and submit button

1 user name
2 pwd/token

and 1 checkbox 'First time user'


if 'first time user' is selected then the 'Submit' button to be enabled only if the customer puts exactly 6 digits on pwd/token.

if it's unchecked then the submit button to be enabled only if the customer enters 10 digits(pin_token code)

please send me code will be very thankful for your help

First of all Thank you for looking at my issues. Just so you know, I am not a coder

I have a new set of problems I'm hoping someone can help me with.
Please read all three problems listed below as they are all intertwined. Thank you for any assistance you have with these issues.

First, here is the url to my test form
http://www.rocpinions.com/test-main-form.html

Next, Here is the code I am using.

The code is set up on dog cat other and none.
The test check 1 etc are all individual check box groups

Code:

<script type="text/javascript">
function checkI()
{
var other=0;
 var checkL = document.getElementsByName('form[PetsInHouse][]');
   for (var i=0;i<checkL.length-1;i++){
     if(document.getElementById('PetsInHouse3').checked){
      document.getElementById('PetsInHouse'+i).disabled = true;
      document.getElementById('PetsInHouse'+i).checked = false;
		}
     else {
      document.getElementById('PetsInHouse'+i).disabled = false;
		}
		if(document.getElementById('PetsInHouse'+i).checked){
		other++
		}
	 }
	 document.getElementById('PetsInHouse3').disabled=other>0?true:false;
	}
</script>

And here is the call I am using

onclick="checkI();"

Problem 1
This code works fine as is is set up and does what it should. The problem is i am also using this on longer sets of check boxes and I would like to instead of disabling I would like to have it set up so if someone clicks dog cat and other then if they choose the check box "None" it would empty all other check boxes and check the check box "None" and visa versa if none was checked and they checked dog, it would empty the None check.

Problem 2
I am using Joomla cms and a form constructor called RS Form Pro. It stores the data submitted in the form to a data base. As it is now, all the info in the check box group is submitted to ONE column. I need to submit it to individual columns for each choice. I can accomplish this by using individual check box groups for EACH item. This will put it in separate columns in the data base but I still need to have it set up so if someone clicks dog cat and other then if they choose the check box "None" it would empty all other check boxes and check the check box "None" and visa versa if none was checked and they checked dog, it would empty the None check.

Problem 3
How it submits data to the data base
Right now, it submits the data from the check boxes by the name of the check box. What I would like to have is a 1 if it IS checked and a 0 if IS NOT checked.

Again, Thank you for any assistance

DeZiner

Hello,

After pulling out all my hairs, I am seeking some help with a JS validation script which would be for a case where we have multiple radio buttons which required a response from user and as a additional case if certain radio option is selected user should select one or more options listed as check boxes under that specific radio button.

I have attached an image showing sample scenario with this post.

If someone has an Idea how to to do please sail me thru.

I am trying to use some JavaScript code that I found by searching the web, my goal is to have a form with a "required" checkbox to force my users to acknowledge they have read my "Terms and Conditions" section. The code that I found ALMOST works properly - it does pop-up the "Alert" window when the checkbox is blank and the submit button is clicked... however, if the user closes the Alert window in order to click the checkbox in compliance, the "submit.form" command is executed before they have a chance. In other words, there is no "pause" in the execution of the script to allow the user to make the correction by clicking the checkbox.

Here is the code:
Code:

<script LANGUAGE="JavaScript">
<!-- 
function ValidateForm(form){ 
ErrorText= ""; 
if ( form.terms.checked == false ) { alert ( "Please check the Terms & Conditions box." ); return false; } 
if (ErrorText= "") { form.submit() }} 
-->
</script>

Here is the HTML for the checkbox:
Code:

<input name="terms" type="checkbox" value="Yes" />

Here is the HTML for the submit button that calls the function:
Code:

<input type="submit" value="Continue" onclick="ValidateForm(this.form)" />

I've searched for other examples of code to accomplish this objective, but I'm hoping for a quicker solution by coming to the experts who can see the flaw in this JavaScript.

Thanks for any help,
Rob

I have a form, on which I have multiple checkboxes and text fields.

Now I want that the form can't submit untill at least 1 checkbox is selected or a text field is filled.

But even with the javascript validation I already have the form still submits.

Any help on this one?
Here is the whole page on which the checkboxes, text fields and javascript validation a
PHP Code:
<script type="text/javascript" language="javascript">
function checkCheckBoxes() {
    if (document.form2.nbs_vmb[].checked == false)
        {
        alert ('Select at least checkbox to make a selection!');
        return false;
        }
    else
        {
        return true;
        } 
</script>
<div id="left2">
<div id="left_02">
<div id="toppage">
  <h3><?php echo $tcm_label[59]; ?></h3>
</div>
<div style="margin:0px 1px 0px 1px">
  <form id="form_ins_contact" onsubmit="return checkCheckBoxes();" name="form2" action="test.php" method="POST" >
    <table width="680" height="350" border="0" align="center" cellpadding="0" cellspacing="2">
      <tr>
        <td width="160" align="right"><strong><?php echo $tcm_label[36]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_lid_vmb" /></td>
        <td class="td_no_border2"></td>
        <td class="td_no_border2"></td>
      </tr>
      <tr>
        <td width="160" align="right"><strong><?php echo $tcm_label[37]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_selfburns" /></td>
        <td align="right"><strong><?php echo $tcm_label[29]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_zip" type="text" id="nbs_zip" maxlength="6" size="6" /></td>
      </tr>
      <tr>
        <td width="160" align="right"><strong><?php echo $tcm_label[40]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_profrelatie" /></td>
        <td align="right"><strong><?php echo $tcm_label[60]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_contact_year" type="text" id="nbs_contact_year" maxlength="4" size="4" /></td>
      </tr>
      <tr>
        <td width="160" align="right"><strong><?php echo $tcm_label[42]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_revalinet" /></td>
        <td align="right"><strong><?php echo $tcm_label[38]; ?></strong></td>
        <td class="td_no_border" width="194"><input name="nbs_year" type="text" id="nbs_year" maxlength="4" size="4" /></td>
      </tr>
      <tr>
          <td align="right"><strong><?php echo $tcm_label[44]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_juridischehulp"  /></td>
        <td align="right"><strong><?php echo $tcm_label[41]; ?></strong></td>
        <td class="td_no_border" width="194"><input name="nbs_vmb[]" type="checkbox" value="nbs_psychonet" /></td>
      </tr>
      <tr>
          <td align="right"><strong><?php echo $tcm_label[45]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_nomail" /></td>
        <td align="right"><strong><?php echo $tcm_label[43]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_reintegranet" /></td>
      </tr>
      <tr>
        <td align="right" class="td_no_border2">&nbsp;</td>
        <td class="td_no_border2">&nbsp;</td>
        <td></td>
        <td class="td_no_border2"><img src="../images/intra icon.png" width="96" height="96" /></td>
      </tr>
    </table>
    <table width="281" border="0" align="center" cellpadding="0" cellspacing="2">
      <tr>
        <td align="center" class="td_no_border2" nowrap="nowrap">
            <input type="submit" name="submit" class="buttons" value="Export Selecties" />
        </td>
      </tr>
    </table>
  </form>
  </div>
</div>
</div>

Thanks in advanced.

Code:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>


</head>
<script type="text/javascript">

	var strWord = document.myForm.txtWord.value;

	function validateWord() 
	{
	while(strWord == document.formname.myForm.value.length > 8 && var ichars = "PJ" );
	{ 
	alert ("OK.");
	}
	}


</SCRIPT>

	<form name="myForm" action="" method="" onsubmit="return false">
	<p>
	<input name="txtWord" size="25" value="Enter Word Here">
	</p>

	<p>
	<input type="button" value="Validate The Word" name="cmdValidateWord" onclick ="validateWord()">
	</p>
</html>

Hi, I'm having trouble getting this code to work. It needs to check if the user has entered the correct characters into a field. A valid word should have a P at the start, and contain a J somewhere in it. If the word is valid, a box pops up saying "OK" once the user has clicked the ValidateWord button.

It also needs to keep this kind of structure (ie. a while construct & validated through pressing a button). This is purely for personal education about performance of "while" constructs for field validation.

Any help is hugely appreciated.

Hello,

I am trying to create a function that tests to see if the text field that I create in my markup contains numbers. Please help.


Thank you.

Hi,

I want to pop up message incase of validation failure of form field.

If I use document.write("name shold be between 2 to 15 char only")

it redirects to new page and gives this message..........

if I use alert than incase or 2 or more validation fail it gives multiple or one by one alert boxes.

I want to to displey my message near to field............... Code:

function validateForm()
{
var x=document.forms["regform"]["email_id"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");


if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}

Hello, I have a three field contact form on an HTML5 page. Using CSS3/HTML5 techniques, the fields change state as the info is entered properly (green OK symbol if good, red "!" if not, etc). That all works as expected in all browsers.

My final hurdle is preventing the form being submitted with nothing entered in the fields. I have done hours of research and have tried several ways of writing the checkFeedbackForm function. My problem is that none of the solutions I've found are recognized by FireFox (mac and pc) and IE. They just ignore the javascript and allow the empty form to be emailed.

Here is the code that is checking the fields:

Code:

<script type="text/javascript">
function checkFeedbackForm(form){
	if(form.fullname.value=='') {
		alert('Please enter your Name');
		form.fullname.focus();
		return false;
		}
if(form.email.value=='') {
	alert('Please enter a valid Email address');
	form.email.focus();
	return false;
	}
if(form.message.value=='') {
	alert('Please tell me a little bit about your ideas.');
	form.message.focus();
	return false;
	}
return true;
}
</script>

Here is my form:
Code:

<form id="signup" action="mailinfo.php" method="post" onSubmit="return checkFeedbackForm(this);" >
<input type="hidden" name="returnURL" value="thankyou.html" />
<fieldset><ol>

<li><label for="fullname">Name</label> 
<input type="text" id="fullname" name="fullname" placeholder="Your name" required /></li>

<li><label for="email">Email</label> 
<input type="email" id="email" name="email" placeholder="Your email" title="Please enter a valid email" required /></li>

<li><label for="message">Message</label> 
<textarea id="message" name="message" cols="32" rows="8"  placeholder="Your message" required /></textarea></li></ol>
</fieldset>

<input type="submit" value="Send It" />
<div class="privacy">Your information is for our project only and will not be shared or sold. Promise.</div>
</form>

Through experimentation, I have found that removing the ID from the form allows the javascript to function in all browsers, but that kills my form styling. I think it will be easier to fix the javascript than redo my CSS.

This may be obvious, but I'm not a programmer. I'm a designer who muddles through on small scale stuff like this. Any help is greatly appreciated.

Thanks.

Hi,

My code seems to work individually it is when I try to do multiple input validation that everything goes wrong. I have tried at the moment to cut it down to just two validation inputs to simplify things, but the more I try and play around with it the worse it seems to get.

I know a lot of people post about this but I have tried comparing to other people's codes and solutions and just can't work out what is wrong.

I would be incredibly grateful for any help.

Code:

<html>
<title>Sign Up</title>
<head>

<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
	{
	apos=value.indexOf("@");
	dotpos=value.lastIndexOf(".");
	if (apos<1||dotpos-apos<2)
		{alert(alerttxt);return false;}
	else {return true;}
	}
}

function validate_fname(field,alerttxt)
{
with (field)
	{
	if (fname=="enter firstname" OR fname="")
		{alert(alerttxt);return false;}
	else {return true;}
	}
}

function validate_form(thisform)
{
with (thisform)
	{
	if (validate_email(email,"The email address you entered is not a valid email address!")==false)
		{email.focus();return false;}
	else 
		{return true;}
	}
	{
	if (validate_fname(fname,"Please enter your firstname!")==false)
		{cemail.focus();return false;}

	else
		{return true;}
	}
}

</script>
</head>

<body>




<form action="userdetails" id="signupForm" onsubmit="return validate_form(this)" method="post">

<fieldset class="two">
	<legend>Your Information:</legend>
	<br />
	


	<br />
		<label class="two">First name:</label>
			<input type="text" class="input" required="required" name="fname" value="enter firstname" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter firstname':this.value;" size="30%" />
	<br />
	<br />


		<label class="two">Email:</label>
			<input type="text" class="input" name="email" value="enter email address" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter email address':this.value;" size="30%" />




	<br />
	<br />

</fieldset>
<br />
<br />




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

	</form>
</body>
</html>

Hello Everyone,

I need to add some sort of validation that will only allow users to upload .jpg files. I really need to add this to an existing script I've already written. I've seen scripts and tutorials that add the jpg validation but only incorporate the image field of the form. I need the script to validate several forms in the field, not just one. When I try to add validation for the jpg field to the follow script everything stops working. Can someone please point me in the right direction? Thanks!

Code:

<form id="uploadForm" method=post class="upload" action=submit_script.php enctype='multipart/form-data' onsubmit="return validate_form(this)">
		<p><b>First Name</b><br/>
		<INPUT TYPE="TEXT" NAME="name_first" size="40"></p>

		<p><b>Last Name</b><br/>
		<INPUT TYPE="TEXT" NAME="name_last" size="40"></p>

		<p><b>School Name</b><br/>
		<INPUT TYPE="TEXT" NAME="name_school" size="40"></p>

		<p><b>Your School E-Mail</b><font class="super">1</font><br/>
		<INPUT TYPE="TEXT" NAME="school_email" size="40"></p>

		<p><b>Your File</b><font class="super">4,5</font><br/>
		<input id="userfile1" name="userfile1" type="file" size="30"></p>
	
		<p><input name="upload" type="submit" class="box" id="upload" value="Submit Your Poster" onClick="YAHOO.example.container.wait.show();"></p>
	</form>

Code:

function validate_required_field(field,alertText) {
	with (field) {
		if (value==null||value=="") {
            YAHOO.example.container.wait.hide();
			alert(alertText);
	  		return false;
		}
		else {
			return true;
		}
	}
}


function validate_email(field,alertText)
{
	with (field) {
		apos=value.indexOf("@");
		dotpos=value.lastIndexOf(".");
		if (apos<1||dotpos-apos<2) {
            YAHOO.example.container.wait.hide();
			alert(alertText);
			return false;
		}
		else {
			return true;
		}
	}
}


function validate_form(thisform) {
	with (thisform) {
		if (validate_required_field(name_first,"Please enter a value in the 'First Name' field before continuing")==false) {
			name_first.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_required_field(name_last,"Please enter a value in the 'Last Name' field before continuing")==false) {
			name_last.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_required_field(name_school,"Please enter a value in the 'School Name' field before continuing")==false) {
			name_school.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_required_field(school_email,"Please enter a value in the 'School Email' field before continuing")==false) {
			school_email.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_email(school_email,"Please enter a valid email address before continuing")==false) {
			school_email.focus();
			return false
		}
	}
}

I'm only validating one (Consent) radio button with this code but i need to validate multiple different questions/buttons.

Code:

<script>

function getRBtnName(GrpName) {
  var sel = document.getElementsByName(GrpName);
  var fnd = -1;
  var str = '';
  for (var i=0; i<sel.length; i++) {
    if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
  }
  return fnd;  
} 

function checkForm() {
 var chosen = getRBtnName('Consent');
 if (chosen < 0) {
  alert( "Please choose one answer when you are asked to select a number." );
  return false;
 } else { return true; }
}

</script>


<form action="congratulations_aff.php" method="post" name="congratulations_aff" onSubmit="return checkForm()">
	
<table border="0" cellspacing="1" cellpadding="0">
 
  <tr>
    <td colspan="3">I consent to providing my electronic signature.</p></td>
  </tr>
  <tr>
    <td colspan="3" valign="top">
      <input type="radio" name="Consent" value="Y" />
      Yes
      
      <input type="radio" name="Consent" value="N" />
      No
   
      <table border="0" cellspacing="1" cellpadding="0">
                <tr>
          <td>I consent to electronic receipt of my information reporting documentation.</td>
        </tr>
        <tr>
          <td valign="top">
            <input type="radio" name="Consent1099YesNo" value="Y" />
            Yes
            
            <input type="radio" name="Consent1099YesNo" value="N" />
            No</td>
        </tr>
        <tr>
     <td valign="top">
      For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?
        <input type="radio" name="USPersonYesNo" value="Y" />
        Yes
        
        <input type="radio" name="USPersonYesNo" value="N" />
        No</tr>
      </table>
       
           
 <input type="submit" value="submit" value="Submit" /> 
</form>

Any help would be greatly appreciated.