JavaScript Validation via JQuery - using an if statement
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.
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);" /> Other $<input name="Other" type="text" class="number" id="Other" size="10" />
ASKER
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
just include this into the function from which you will call submit
if (document.getElementById("
{
//checkbox is checked
document.forms[0].submit()
}
if (document.getElementById("
{
//checkbox is checked
document.forms[0].submit()
}
ASKER
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("
{
//checkbox is checked
var value = parseFloat(document.getEle
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(
{
alert("You selected Other Amount but did not enter an amount. Please enter an amount into the field.");
}
}
}
The following was called via thae "form" tag's "onsubmit" event handler.
function validateTextField()
{
if (document.getElementById("
{
//checkbox is checked
var value = parseFloat(document.getEle
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(
{
alert("You selected Other Amount but did not enter an amount. Please enter an amount into the field.");
}
}
}
thanks for the points
it should be
<input type="radio" name="UnitPrice" id="UnitPrice" value="Other" onClick="validateTextField
function validateTextField()
{
var value = parseFloat(document.getEle
if ( value=="NaN" || value < 1 )
{
alert("invalid value");
}
}