i am using the code below for form validations
var x=document.forms["form2"]["weeks"].value;
if (x==null || x=="")
{
alert("Duration needs to be checked");
return false;
}
but weeks is actually radio buttons
<input type="radio" value="364" name="weeks" />
<input type="radio" value="301" name="weeks" />
how do i convert the above code to work with a radio button
thanks
in advance
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkRadio (frmName, rbGroupName) {
var radios = document[frmName].elements[rbGroupName];
for (var i=0; i <radios.length; i++) {
if (radios[i].checked) {
return true;
}
}
return false;
}
function valFrm() {
if (!checkRadio("frm1","weeks"))
alert("You didnt select any weeks");
else
alert("You selected a week");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="frm1" ACTION="javascript:valFrm();">
<INPUT TYPE="radio" NAME="weeks" value="364"/>364
<INPUT TYPE="radio" NAME="weeks" value="301"/> 301
<INPUT TYPE="radio" NAME="weeks" value="400"/>400
<INPUT TYPE="submit">
</FORM>
</BODY>
</HTML>
Try this script.
ok i tried putting the following into my form
i have a alert before that says if the start date hasnt been filled in and one after that tells if the end date hasnt been filled in
the you code goes in between them
var x=document.forms["form2"]["StartDate"].value;
if (x==null || x=="")
{
alert("Start Date needs to be filled in");
return false;
}
function checkRadio (frmName, rbGroupName) {
var radios = document[frmName].elements[rbGroupName];
for (var i=0; i <radios.length; i++) {
if (radios[i].checked) {
return true;
}
}
return false;
}
function valFrm() {
if (!checkRadio("form2","weeks"))
alert("Duration needs to be selected");
else
alert("You selected a week");
}
var x=document.forms["form2"]["EndDate"].value;
if (x==null || x=="")
{
alert("End Date needs to be filled in");
return false;
}
the form is called form2 and the inputs are
<input type="radio" value="364" name="weeks" />
<input type="radio" value="301" name="weeks" />
i have got it sort of working i removed the function valFrm() {
from your code as i a;lready have that in place for the rest of the alerts however now it prompts if the weeks havent been selected but also the one below "End Date needs to be filled in" so it it going from one prompt to another, i tried adding a
return false;
at the end of alert("Duration needs to be selected"); to read
at the end of alert("Duration needs to be selected");
return false;
}
but then that doesnt work
here is the code
function validateForm()
{
var x=document.forms["form2"]["StartDate"].value;
if (x==null || x=="")
{
alert("Start Date needs to be filled in");
return false;
}
function checkRadio (frmName, rbGroupName) {
var radios = document[frmName].elements[rbGroupName];
for (var i=0; i <radios.length; i++) {
if (radios[i].checked) {
return true;
}
}
return false;
}
{
if (!checkRadio("form2","weeks"))
alert("Duration needs to be selected");
}
var x=document.forms["form2"]["EndDate"].value;
if (x==null || x=="")
{
alert("End Date needs to be filled in");
return false;
}
i have also run into another problem, i have multiple radio boxes, i also have
<input type="radio" name="Title" value="Mr" />
<input type="radio" name="Title" value="Mrs" />
<input type="radio"name="Title" value="Miss" />
input type="radio" name="Title" value="Ms" />
can theses use the same
function checkRadio (frmName, rbGroupName) {
var radios = document[frmName].elements[rbGroupName];
for (var i=0; i <radios.length; i++) {
if (radios[i].checked) {
return true;
}
}
return false;
}
{
then carry on with
if (!checkRadio("form2","Title"))
alert("Title needs to be selected");
}
thanks in advance
You seem to be wanting lot of validation in your code.
Check out jQuery Validator plugin - http://bassistance.de/jquery-plugins/jquery-plugin-validation/
It's a great lightweight plugin you could use for validating your form inputs.
They have Demos on their site that should give you complete insights.
You could also download the source file kit here: http://jquery.bassistance.de/validate/jquery-validation-1.9.0.zip
This kit includes demos, CSS, JS and all related files. They should help you get started.
For validating 2 radio buttons, try this:
<html>
<head>
<script type="text/javascript">
function validateRadio(obj,correct){
var result = 0
for(var i=0; i<obj.length; i++){
if(obj[i].checked==true && obj[i].value==correct) result = 1
}
if(!result && obj.value == correct) result = 1
return result }
</script>
</head>
<body>
<form onSubmit="
var err = ''
if(!validateRadio(this.a,3)){ err+='\nFirst radio is wrong' }
if(!validateRadio(this.b,2)){ err+='\nSecond radio is wrong' }
if(err.length){ alert('Problem:'+err); return false; }
else{ alert('Good Job -- Submitting'); return true; }
"
action="#">
Choose "3"
<input name="a" value="1" onChange="if(!validateRadio(this,3)) alert('Incorrect')" type="radio">
1
<input name="a" value="2" onChange="if(!validateRadio(this,3)) alert('Incorrect')" type="radio">
2
<input name="a" value="3" onChange="if(!validateRadio(this,3)) alert('Incorrect')" type="radio">
3
<input name="a" value="4" onChange="if(!validateRadio(this,3)) alert('Incorrect')" type="radio">
4
<p>Choose "2"
<input name="b" value="1" type="radio">
1
<input name="b" value="2" type="radio">
2
<input name="b" value="3" type="radio">
3
<input name="b" value="4" type="radio">
4 </p>
<p>
<input value="Submit" type="submit">
</p>
</form>
</body></html>
ok i am having a look at this one but isnt there an easy way of just saying this radio group needs to be selected, and use them as indivudual commands
can these use the same as mentioned earlier, this above code is again doing too much
function checkRadio (frmName, rbGroupName) {
var radios = document[frmName].elements[rbGroupName];
for (var i=0; i <radios.length; i++) {
if (radios[i].checked) {
return true;
}
}
return false;
}
{
then carry on with
if (!checkRadio("form2","Title"))
alert("Title needs to be selected");
}
thanks again
Try this for 2 validations:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkRadio (frmName, rbGroupName) {
var radios = document[frmName].elements[rbGroupName];
for (var i=0; i <radios.length; i++) {
if (radios[i].checked) {
return true;
}
}
return false;
}
function valFrm() {
if (!checkRadio("frm1","start"))
alert("You didnt select any start week");
else
alert("You selected a start week");
if (!checkRadio("frm1","end"))
alert("You didnt select any end week");
else
alert("You selected a end week");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="frm1" ACTION="javascript:valFrm();">
START
<INPUT TYPE="radio" NAME="start" value="364"/>364
<INPUT TYPE="radio" NAME="start" value="301"/> 301
<INPUT TYPE="radio" NAME="start" value="400"/>400
<br>
END
<INPUT TYPE="radio" NAME="end" value="400"/>100
<INPUT TYPE="radio" NAME="end" value="400"/>200
<INPUT TYPE="radio" NAME="end" value="400"/>300
<BR>
<INPUT TYPE="submit">
</FORM>
</BODY>
</HTML>
For Title, append this script in your function:
function valFrm() {
if (!checkRadio("frm1","start"))
alert("You didnt select any start week");
else
alert("You selected a start week");
if (!checkRadio("frm1","end"))
alert("You didnt select any end week");
else
alert("You selected a end week");
if (!checkRadio("frm1","title"))
alert("Title needs to be selected");
else
alert("You selected a title");
}
ok i think we are getting there. i will have a playa round with this. the thing is i dont really want them leading from one to another, i want them completly seperate si i think i need to get rid of the else statement,
in the form i have
radio
text input
text input
text input
then radio, and i need them going in order of input.
with the method you have shown me this will validate all the radio togeather wont it??
i have the code below working and trued adding the else if but it wouldnt allow it. I have put the else in BOLD where i added it.
function validateForm()
{
var x=document.forms["form2"]["StartDate"].value;
if (x==null || x=="")
{
alert("Start Date needs to be filled in");
return false;
}
function checkRadio (frmName, rbGroupName) {
var radios = document[frmName].elements[rbGroupName];
for (var i=0; i <radios.length; i++) {
if (radios[i].checked) {
return true;
}
}
return false;
}
{
if (!checkRadio("form2","weeks"))
alert("Duration needs to be selected");
}
var x=document.forms["form2"]["EndDate"].value;
else if (x==null || x=="")
{
alert("End Date needs to be filled in");
return false;
}
I have included the whole alert code but its just the top part that i am talking about
| <script type="text/javascript"> |
function validateForm()
{
var x=document.forms["form2"]["StartDate"].value;
if (x==null || x=="")
{
alert("Start Date needs to be filled in");
return false;
}
function checkRadio (frmName, rbGroupName) {
var radios = document[frmName].elements[rbGroupName];
for (var i=0; i <radios.length; i++) {
if (radios[i].checked) {
return true;
}
}
return false;
}
{
if (!checkRadio("form2","weeks"))
alert("Duration needs to be selected");
}
var x=document.forms["form2"]["EndDate"].value;
if (x==null || x=="")
{
alert("End Date needs to be filled in");
return false;
}
if (!checkRadio("form2","Title"))
alert("Title needs to be selected");
var x=document.forms["form2"]["userid"].value;
if (x==null || x=="")
{
alert("user id needs to be filled in");
return false;
}
var x=document.forms["form2"]["password"].value;
if (x==null || x=="")
{
alert("user password needs to be filled in");
return false;
}
var x=document.forms["form2"]["sex"].value;
if (x==null || x=="")
{
alert("sex needs to be filled in");
return false;
}
var x=document.forms["form2"]["Nationality"].value;
if (x==null || x=="")
{
alert("Nationality needs to be filled in");
return false;
}
var x=document.forms["form2"]["Marital_Status"].value;
if (x==null || x=="")
{
alert("Marital Status needs to be filled in");
return false;
}
var x=document.forms["form2"]["PhoneDay"].value;
if (x==null || x=="")
{
alert("Daytime phone number needs to be filled in");
return false;
}
var x=document.forms["form2"]["PhoneEvening"].value;
if (x==null || x=="")
{
alert("Evening phone number needs to be filled in");
return false;
}
var x=document.forms["form2"]["PhoneMobile"].value;
if (x==null || x=="")
{
alert("Mobile phone number needs to be filled in");
return false;
}
var x=document.forms["form2"]["email"].value;
if (x==null || x=="")
{
alert("email address needs to be filled in");
return false;
}
var x=document.forms["form2"]["Smoker"].value;
if (x==null || x=="")
{
alert("smoking status needs to be filled in");
return false;
}
var x=document.forms["form2"]["NextKin"].value;
if (x==null || x=="")
{
alert("Next of Kin needs to be filled in");
return false;
}
var x=document.forms["form2"]["CurrentAddress"].value;
if (x==null || x=="")
{
alert("Current Address needs to be filled in");
return false;
}
var x=document.forms["form2"]["LivingStatus"].value;
if (x==null || x=="")
{
alert("Living Status needs to be filled in");
return false;
}
var x=document.forms["form2"]["PrevAddress"].value;
if (x==null || x=="")
{
alert("Previous Address needs to be filled in");
return false;
}
var x=document.forms["form2"]["Student"].value;
if (x==null || x=="")
{
alert("Student needs to be filled in");
return false;
}
var x=document.forms["form2"]["BankName"].value;
if (x==null || x=="")
{
alert("Bank Name needs to be filled in");
return false;
}
var x=document.forms["form2"]["BankAccNum"].value;
if (x==null || x=="")
{
alert("Bank Account Number needs to be filled in");
return false;
}
var x=document.forms["form2"]["BankSortCode"].value;
if (x==null || x=="")
{
alert("Bank Sort Code needs to be filled in");
return false;
}
var x=document.forms["form2"]["BankDuration"].value;
if (x==null || x=="")
{
alert("Bank Duration needs to be filled in");
return false;
}
var x=document.forms["form2"]["BankDCard"].value;
if (x==null || x=="")
{
alert("Debit / Credit card needs to be filled in");
return false;
}
var x=document.forms["form2"]["BankElectoral"].value;
if (x==null || x=="")
{
alert("Electoral Roll needs to be filled in");
return false;
}
var x=document.forms["form2"]["LLHost"].value;
if (x==null || x=="")
{
alert("Previuos Host Tenant needs to be checked");
return false;
}
var x=document.forms["form2"]["LLName"].value;
if (x==null || x=="")
{
alert("Landlords Name needs to be filled in");
return false;
}
var x=document.forms["form2"]["LLTele"].value;
if (x==null || x=="")
{
alert("Landlords Telephone Number needs to be filled in");
return false;
}
var x=document.forms["form2"]["LLEmail"].value;
if (x==null || x=="")
{
alert("Landlords Email Address needs to be filled in");
return false;
}
var x=document.forms["form2"]["LLAddress"].value;
if (x==null || x=="")
{
alert("Landlords Address needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuName"].value;
if (x==null || x=="")
{
alert("Guarantors Name needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuTitle"].value;
if (x==null || x=="")
{
alert("Guarantors Title needs to be complete");
return false;
}
var x=document.forms["form2"]["GuSex"].value;
if (x==null || x=="")
{
alert("Guarantors Title needs to be complete");
return false;
}
var x=document.forms["form2"]["GuMarital"].value;
if (x==null || x=="")
{
alert("Guarantors MArital Status needs to be complete");
return false;
}
var x=document.forms["form2"]["GuPhoneDay"].value;
if (x==null || x=="")
{
alert("Guarantors Daytime Telephone Number needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuPhoneEven"].value;
if (x==null || x=="")
{
alert("Guarantors Evening Telephone Number needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuPhoneMob"].value;
if (x==null || x=="")
{
alert("Guarantors Mobile Telephone Number needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuPhoneEmail"].value;
if (x==null || x=="")
{
alert("Guarantors Email Address needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuCurrentAdd"].value;
if (x==null || x=="")
{
alert("Guarantors Current Address needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuPrevAdd"].value;
if (x==null || x=="")
{
alert("Guarantors Previous Address needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuBankName"].value;
if (x==null || x=="")
{
alert("Guarantors Bank Name needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuBankAccNu"].value;
if (x==null || x=="")
{
alert("Guarantors Bank Account Number needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuBankSort"].value;
if (x==null || x=="")
{
alert("Guarantors Bank Sort Code needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuBankDurat"].value;
if (x==null || x=="")
{
alert("Guarantors Bank Duration needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuBankDebit"].value;
if (x==null || x=="")
{
alert("Guarantors Debit / Credit card needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuBankElect"].value;
if (x==null || x=="")
{
alert("Guarantors Electoral Roll needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuEmpProffes"].value;
if (x==null || x=="")
{
alert("Guarantors Profession needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuEmpAnnWa"].value;
if (x==null || x=="")
{
alert("Guarantors Annual Wages needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuEmpPayroll"].value;
if (x==null || x=="")
{
alert("Guarantors Payroll Number needs to be filled in");
return false;
}
var x=document.forms["form2"]["GuSelfEmp"].value;
if (x==null || x=="")
{
alert("Guarantors Self Employment Options needs to be complete");
return false;
}
var x=document.forms["form2"]["GuHaveAcc"].value;
if (x==null || x=="")
{
alert("Guarantors Have an Accountant Options needs to be complete");
return false;
}
var x=document.forms["form2"]["GuAccName"].value;
if (x==null || x=="")
{
alert("Guarantors Accountant Name needs to be filled out");
return false;
}
var x=document.forms["form2"]["GuAccContName"].value;
if (x==null || x=="")
{
alert("Guarantors Accountant Contact Name needs to be filled out");
return false;
}
var x=document.forms["form2"]["GuAccAdd"].value;
if (x==null || x=="")
{
alert("Guarantors Accountants Address needs to be filled out");
return false;
}
var x=document.forms["form2"]["GuAccDayTel"].value;
if (x==null || x=="")
{
alert("Guarantors Accountants Daytime Telephone number needs to be filled out");
return false;
}
var x=document.forms["form2"]["GuAccMobTel"].value;
if (x==null || x=="")
{
alert("Guarantors Accountants Mobile Telephone number needs to be filled out");
return false;
}
var x=document.forms["form2"]["GuAccEmail"].value;
if (x==null || x=="")
{
alert("Guarantors Accountants Email Address needs to be filled out");
return false;
}
var x=document.forms["form2"]["GuAccAdditional"].value;
if (x==null || x=="")
{
alert("Guarantors Accountants Additional informatio needs to be filled out (if none please type 'none'");
return false;
}
var x=document.forms["form2"]["GuEmployerNam"].value;
if (x==null || x=="")
{
alert("Guarantors Employers Name needs to be filled out");
return false;
}
var x=document.forms["form2"]["GuEmployerAdd"].value;
if (x==null || x=="")
{
alert("Guarantors Employers Address needs to be filled out");
return false;
}
var x=document.forms["form2"]["GuEmployerContactName"].value;
if (x==null || x=="")
{
alert("Guarantors Employers Contact Name needs to be filled out");
return false;
}
var x=document.forms["form2"]["GuEmployerTele"].value;
if (x==null || x=="")
{
alert("Guarantors Employers Telephone Number needs to be filled out");
return false;
}
var x=document.forms["form2"]["GuEmployerEmail"].value;
if (x==null || x=="")
{
alert("Guarantors Employers Email Address needs to be filled out");
return false;
}
{
| if (!document.form2.terms.checked) |
{ alert("By ticking this box you agree that you have clearly read this document according to our terms and conditions.");
return false; }
return true;
}
}
</script>
i still havent got this working
| <script type="text/javascript"> |
function validateForm()
{
var x=document.forms["form2"]["StartDate"].value;
if (x==null || x=="")
{
alert("Start Date needs to be filled in");
return false;
}
function checkRadio (frmName, rbGroupName) {
var radios = document[frmName].elements[rbGroupName];
for (var i=0; i <radios.length; i++) {
if (radios[i].checked) {
return true;
}
}
return false;
}
{
if (!checkRadio("form2","weeks"))
alert("Duration needs to be selected");
}
else if
var x=document.forms["form2"]["EndDate"].value;
if (x==null || x=="")
{
alert("End Date needs to be filled in");
return false;
}
if (!checkRadio("form2","Title"))
alert("Title needs to be selected");
i have added the else if but dreamweaver is showing an error here..if i remove the else if statment two alerts are show one after the other. i need to show just the first one
first this is shown
Duration needs to be selected
then i "ok " this one then
End Date needs to be filled in
i need something in between these to stop the second alert
Hi there, i have used the jquery link and i works great until i go to submit the form
it has got an alert at the beginning
$.validator.setDefaults({
submitHandler: function() { alert("submitted!");
}
i want to delete the submitted alert and just direct to the new page, how is this done?
the full script is here
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!");
}
});
$().ready(function() {
// validate signup form on keyup and submit
$("#form2").validate({
rules: {
StartDate: "required",
EndDate: "required",
Nationality: "required",
PhoneDay: "required",
PhoneEvening: "required",
PhoneMobile: "required",
NextKin: "required",
CurrentAddress: "required",
PrevAddress: "required",
BankName: "required",
BankAccNum: "required",
BankSortCode: "required",
BankDuration: "required",
LLName: "required",
LLTele: "required",
LLEmail: "required",
LLAddress: "required",
GuName: "required",
GuPhoneDay: "required",
GuPhoneEven: "required",
GuPhoneMob: "required",
GuPhoneEmail: "required",
GuCurrentAdd: "required",
GuPrevAdd: "required",
GuBankName: "required",
GuBankAccNu: "required",
GuBankSort: "required",
GuBankDurat: "required",
GuEmpProffes: "required",
GuEmpAnnWa: "required",
GuEmpPayroll: "required",
GuAccName: "required",
GuAccContName: "required",
GuAccAdd: "required",
GuAccDayTel: "required",
GuAccMobTel: "required",
GuAccEmail: "required",
GuEmployerNam: "required",
GuEmployerAdd: "required",
GuEmployerContactName: "required",
GuEmployerTele: "required",
GuEmployerEmail: "required",
userid: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
email: {
required: true,
email: true
},
terms: "required"
},
messages: {
StartDate: "Please select a start date",
EndDate: "Please select an end date",
Nationality: "Please enter your nationality",
PhoneDay: "Please enter a daytime phone number",
PhoneEvening: "Please enter a evening phone number",
PhoneMobile: "Please enter a mobile number",
NextKin: "Please enter your next of kin",
CurrentAddress: "Please enter a current address",
PrevAddress: "Please enter a previous address",
BankName: "Please enter your bank name",
BankAccNum: "Please enter your account number",
BankSortCode: "Please enter your sort code",
BankDuration: "Please enter your bank duration",
LLName: "Please enter landlords name",
LLTele: "Please enter landlords telephone number",
LLEmail: "Please enter landlords email address",
LLAddress: "Please enter landlords address",
GuName: "Please enter guarantor name",
GuPhoneDay: "Please enter guarantor phone number",
GuPhoneEven: "Please enter guarantor evening number",
GuPhoneMob: "Please enter guarantor mobile number",
GuPhoneEmail: "Please enter guarantor email address",
GuCurrentAdd: "Please enter guarantor current address",
GuPrevAdd: "Please enter previous address",
GuBankName: "Please enter guarantor bank name",
GuBankAccNu: "Please enter guarantor account number",
GuBankSort: "Please enter guarantor sort code",
GuBankDurat: "Please enter guarantor bank duration",
GuEmpProffes: "Please enter guarantor proffesion",
GuEmpAnnWa: "Please enter guarantor annual wage",
GuEmpPayroll: "Please enter guarantor payroll number",
GuAccName: "Please enter guarantor accountant name",
GuAccContName: "Please enter guarantors accountant contact",
GuAccAdd: "Please enter guarantors accountants address",
GuAccDayTel: "Please enter guarantors accountants daytime numbers",
GuAccMobTel: "Please enter guarantors accountants mobile",
GuAccEmail: "Please enter guarantors accountants email",
GuAccAdditional: "Please enter guarantors accounts additional info",
GuEmployerNam: "Please enter guarantors employers name",
GuEmployerAdd: "Please enter guarantors employers address",
GuEmployerContactName: "Please enter guarantors employers contact",
GuEmployerTele: "Please enter enter guarantors employers number",
GuEmployerEmail: "Please enter guarantors employers email",
userid: {
required: "Please enter a user ID",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
terms: "Please accept our policy"
}
});
$.metadata.setType("attr", "validate");
$(document).ready(function() {
$("#form2").validate();
$("#selecttest").validate();
});
});
</script>
with the form header here
<form class="cmxform"action="<?php echo $editFormAction; ?>" method="post" name="form2" id="form2">
<input type="hidden" name="MM_insert" value="form2" />
form content in here and works
<input type="submit" value="submit" />
</form>
North America
Europe, Middle East and Africa
Asia Pacific