PDA

View Full Version : Jquery Validate one of the three fields



hemi519
10-30-2012, 12:48 PM
Hi All,


I am facing issues in form validations, i want to validate on the three fields(home phone,mobile phone, work phone) in my form. How can i do it





<div class="pro" style="background-color:#CCCCCC; width:450px; padding:15px; margin-right:15px; margin-top:10px; border-radius:10px;">
<label for="firstName" id="firstNameLabel"> First Name: <em>*</em></label>
<input value="<?php if($first_name){echo $first_name;} else {echo $social_firstname ; }?>" class="inputBoxName" id="firstname" name="firstname">
<input type="hidden" value="<?php echo $job_id ?>" class="inputBoxName" id="job_id" name="job_id">
<input type="hidden" value="<?php echo $social_identifier; ?>" class="inputBoxName" id="identifier" name="identifier">
<input type="hidden" value="<?php if($user_id){echo $user_id;} else {$user_id == 0;} ?>" class="inputBoxName" id="user_id" name="user_id"><br />
<label for="lastName" id="lastNameLabel"> Last Name: <em>*</em></label>
<input value="<?php if($last_name){echo $last_name; } else{echo $social_lastname;} ?>" class="inputBoxName" id="lastname" name="lastname"><br />
<label for="email" id="emailLabel">Email Adddress: <em>*</em></label>
<input value="<?php if($email){echo $email;} else { echo $s_email;} ?>" class="inputBoxNormal" id="email" name="email"><br />
<label for="emailconfirm" id="emailConfirmLabel">Confirm Email: <em>*</em> </label>
<input value="<?php if($email){echo $email;} else { echo $s_email ;} ?>" class="inputBoxNormal" id="c_email" name="c_email">


<!-- My Problem is here i want to validate these three fields, User should enter any of these three fields to get submitted -->


<label for="homePhone" id="homePhoneLabel">Home Phone:</label>
<input value="<?php echo $phone_home; ?>" id="phoneHome" name="phoneHome"><br />
<label for="mobilePhone" id="mobilePhoneLabel">Mobile Phone: <em>*</em></label>
<input value="<?php echo $phone_cell; ?>" class="inputBoxNormal" id="phone" name="phone"><br />
<label for="workPhone" id="workPhoneLabel">Work Phone:</label>
<input value="<?php echo $phone_work; ?>" class="inputBoxNormal" id="phonecel" name="phonecel"><br />





My Validation is below





<script type="text/javascript">

$().ready(function() {




// validate signup form on keyup and submit
$("#signupForm").validate({


rules: {


firstname: "required",
lastname: "required",
pasteresume:"required",
skill:"required",

username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
c_email: {
required: true,
c_email: true
},
phone: {

required: true

},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
pasteresume: "Please enter paste your Resume",
skill: "Please enter your Key Skill",
username: {
required: "Please enter a username",
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",
phone: "Please enter a valid phone number",
agree: "Please accept our policy"
}
});

// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();



if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}





});



var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});