Solved

JavaScript Validation via JQuery - using an if statement

Posted on 2010-09-14
7
550 Views
Last Modified: 2012-06-27
I'm using JQUERY validation on my donation form:
http://docs.jquery.com/Plugins/Validation

I have a set of radio buttons for the amount, IE $25, $20, $15, $10, etc... I also have a radio button for "other", which auto-selects the other textfield for input.

I need to add error-checking to the form that checks:

if UnitPrice.IsChecked=true
than "Other" is required to be a floating point int > 1.

Basically my merchant processor is throwing a "empty basket" error when someone selects the radio button for other, but does not fill in a value in the Other textfield.

See existing code for the two fields below, note that the textfield already has class="number" which activates the jquery error-checking for a floating point value.
<input type="radio" name="UnitPrice" id="UnitPrice2" value="Other" onClick="SelectTheText(document.Donation.Other);" />&nbsp;Other&nbsp;&nbsp;$<input name="Other" type="text" class="number" id="Other" size="10" />

Open in new window

0
Comment
Question by:Eroots
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33673938
So, the requirement is to check the textbox (with id 'Other') value, it should be a floating point value greater than 1, if the checkbox with name 'UnitPrice' is selected. Please confirm on this.

it should be
<input type="radio" name="UnitPrice" id="UnitPrice" value="Other" onClick="validateTextField();" /> $ <input name="Other" type="text" class="number" id="Other" size="10" />

function validateTextField()
{
   var value = parseFloat(document.getElementById("Other").value);
   if ( value=="NaN" || value < 1 )
   {
       alert("invalid value");
   }
}
0
 

Author Comment

by:Eroots
ID: 33674090
the validation can't occur until after the textfield has a value, here is the order of operation:

1) User clicks radio button "UnitPrice2", which selects the radio button next to other.
2) onClick action for "UnitPrice2" puts cursor into "Other" textfield.
3) User enters value into "other"
4) onBlur action for "Other" runs validation function.
5) Error is posted as text after text field if it is empty, or is not a number (decimals accepted to 2 places).

Alternatively, I could see it possible to tie a validation function to my submit button that checks "UnitPrice2", and if it IS checked, then validate "Other" to make sure it's not empty and is a number.

I think what you posted above has a valid function, but does not work as it validates before the user has a chance to enter the value in the field.
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 33674197
then you can call the validateTextField() method at the onblur event of 'Other' textbox.

<input type="radio" name="UnitPrice" id="UnitPrice" value="Other" onClick="document.getElementById('Other').focus();" /> $ <input name="Other" type="text" class="number" id="Other" size="10" onblur="validateTextField()" />

function validateTextField()
{
   var value = parseFloat(document.getElementById("Other").value);
   if ( value=="NaN" || value < 1 )
   {
       alert("invalid value");
   }
}
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Eroots
ID: 33674288
can you also draw up a quick function that I can execute on form submit that makes sure that if the "UnitPrice2" radio button is checked, that there is a valid value in "other"?

The above function solves the validation of the field, but not my original problem of people being able to check the radio button and leave the field blank when the form submits.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33674329
just include this into the function from which you will call submit
if (document.getElementById("UnitPrice2").checked)
{
   //checkbox is checked
   document.forms[0].submit();
}
0
 

Author Closing Comment

by:Eroots
ID: 33692080
Had to piece together the puzzle myself still, but was able to do so via the function below. There were multiple conditions to address, and the expert was only addressing single issues.

The following was called via thae "form" tag's "onsubmit" event handler.

function validateTextField()
{
if (document.getElementById("UnitPrice2").checked)
{
   //checkbox is checked
   var value = parseFloat(document.getElementById("Other").value);
   if ( value=="NaN")
   {
       alert("You must enter a numeric monetary value when selecting other amount");
   }
   else if ( value < 5 )
   {
               alert ("There is a minimum of $5 for online contributions");
   }
   else if ((document.getElementById("Other").value.length==0) || (document.getElementById("Other").value==null))
   {
               alert("You selected Other Amount but did not enter an amount. Please enter an amount into the field.");
      }
}
}
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33692286
thanks for the points
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Use "if not" in a condition 2 19
What is the correct way to check for empty value in input field 2 18
AngularJS: ng-repeat 25 25
REST call Failing 1 12
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question