Hi, I am making a form validation for my website.
I need to put red asterix (*) in the compulsory field.
In my form, if "Country" value is Australia, then the "State" and "postcode" field is necessary.
If "country" is not Australia, then the "state" and "postcode" field are optional. In the second case, the red asterix are moved from "state" and "postcode" field.
I used 2 radio buttons for the "country"; one for value "australia" and the other is for other countries aside australia with a textbox.
If I choose "australia" radio button, the red asterix should be in the "state" and "postcode". If I choose radio button aside australia, the red asterix in "state" and "postcode" should be moved.
I can properly do this part. I done this with Jquery and i need help in this part. I have done the error message, and just the asterix part that still wrong.
Can anyone help me??
Thanks
Here is my code:
<html>
<head>
<title>JQuery FOrm Test</title>
<style type="text/css">
body { font: 11px/15px verdana, arial, helvetica, sans-serif; }
.center { text-align:center; font-style:bold; }
.center_button { display:block;
margin-left: auto;
margin-right: auto; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"
type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready ( function () {
$('.asterix').show();
var checked=true;
$('#rb1').click(function() {
if (!checked)
{
$('.asterix').show();
}
else
{
$('.asterix').hide();
}
checked=!checked;
})
})
function validate()
{
if (document.myform.rb[0].checked==false)
{
var compulsory= new Array("given name","family name","address 1","suburb","country","email address");
for (i=0; i< compulsory.length; i++)
{
if (document.getElementById(compulsory[i]).value=="")
{
alert("Please enter your "+compulsory[i]);
return false;
}
}
}
if (document.myform.rb[0].checked==true)
{
var compulsory_fields= new Array("given name","family name","address 1","suburb","state","postcode","email address");
for (i=0; i< compulsory_fields.length; i++)
{
if (document.getElementById(compulsory_fields[i]).value=="")
{
alert("Please enter your "+compulsory_fields[i]);
return false;
}
}
}
var email = document.getElementById("email address").value;
if (email.length <2)
{
alert("email must be at least 2 characters long");
return false;
}
var atcount=0;
for (i=1; i<email.length-1; i++)
{
if (email.charAt(i)=='@')
atcount++;
}
if (atcount != 1)
{
alert("Invalid Email Address");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myform" action="demo.php" method="post" onsubmit="return validate()">
<table border="1">
<tr><td colspan="2" class="center">Complete Booking - Stage 1 of 4 - Personal Details</td></tr>
<tr><td style="width:250px;">Given Name<span style="color:red">*</span></td><td><input type="text" name="given name" id="given name"></td></tr>
<tr><td>Family Name<span style="color:red">*</span></td><td><input type="text" name="family name" id="family name"></td></tr>
<tr><td>Address Line 1<span style="color:red">*</span></td><td><input type="text" name="address 1" id="address 1"></td></tr>
<tr><td>Address Line 2</td><td><input type="text" name="address 2" id="address 2"></td></tr>
<tr><td>Suburb<span style="color:red">*</span></td><td><input type="text" name="suburb" id="suburb"></td></tr>
<tr><td>State<span class="asterix" style="color:red">*</span></td><td><input type="text" name="state" id="state"></td></tr>
<tr><td>Postcode<span class="asterix" style="color:red">*</span></td><td><input type="text" name="postcode" id="postcode"></td></tr>
<tr><td>Country<span style="color:red">*</span></td><td><input type="radio" name="rb" id="rb1" onclick="this.form.country.disabled = this.checked" value="Australia" checked>Australia</td></tr>
<tr><td></td><td><input type="radio" name="rb" id="rb2" onclick="this.form.country.disabled = this.form.rb1.checked" value="other"><input type="text" name="country" id="country" disabled></td></tr>
<tr><td>Email Address<span style="color:red">*</span></td><td><input type="text" name="email address" id="email address"></td></tr>
<tr><td>Mobile Phone</td><td><input type="text" name="mobile phone" id="mobile phone"></td></tr>
<tr><td>Business Phone</td><td><input type="text" name="business phone" id="business phone"></td></tr>
<tr><td>Work Phone</td><td><input type="text" name="work phone" id="work phone"></td></tr>
</table>
<table style="width:350px;">
<tr><td><input class="center_button" type="submit" name="submit" value="Stage 2 - Payment Details"></td></tr>
</table>
<table style="color:red; font-size:11px;">
<tr><td>Address Line 2, State, Postcode, and Phone Numbers are optional fields for booking made from outside Australia.</td></tr>
<table>
</form>
</body>
</html>the problem should be in the js script which specidy the radio button.
Thanks