Jump to content

complicated form validation


AllenCole

Recommended Posts

Hey there everyone, 

 

I am trying to get this form validation to work, and i think i am screwed unless i build a new form to work with validation. I would love for someone to sugjest an edit that would allow me to keep my form. 

 

Here is the validation i have. towerdata gave this to me. 

<script type="text/javascript">

function check_user(name,phone,email)
{ 
	$.ajax({
	type: "POST",
	url: "mail.php",
	data: "t1="+name+"&t2="+phone+"&t3="+email+,
	success: function(ajax_val) {
		//alert(ajax_val);
		$('#msg').show();
	$('#msg').addClass('alert_error');
	$('#msg').html(ajax_val);
	$('#pmsg').hide();
	}
	});
}

</script>


<script type="text/javascript">
$(document).ready(function(){
$('#pmsg').hide();
	var name = $("#name");
	var phone = $("#phone");
	var email = $("#email");
	
	//var phoneRegex = /^[2-9]\d{2}-\d{3}-\d{4}/;
	
	name.blur(validateName);
	phone.blur(validatePhone);
	email.blur(validateEmail);
	
	name.keyup(validateName);
	phone.keyup(validatePhone);
	email.keyup(validateEmail);
	
	
	$('#submit').click(function(){
		if(validateName() & validatePhone() & validateEmail())
		{
			var fname = document.getElementById('Name').value;
			
			var phone = document.getElementById('phone').value; 
		
			var email =document.getElementById('email').value; 
			
			//alert(email);
			
			check_user(name, phone, email,);
			$('#pmsg').show();
			return true
			
			
		}
		else
		{
			return false;
		}
		});
	
	function validateName(){
		//if it's NOT valid
		if(name.val()==''){
			nameo.text("Enter Name");
			name.addClass("error");
			return false;
		}
		//if it's valid
		else{
			name.text("");
			name.removeClass("error");
			return true;
		}
	}
	
	function validatePhone(){
		//if it's NOT valid
		
		//Matches : xxx-xxx-xxxx only
		
		var phoneRegex = /^\(?(\d{3})\)?[-\. ]?(\d{3})[-\. ]?(\d{4})$/;
		var phoneval = $('#phone').val();
		
		if(!phoneRegex.test(phoneval)){
			//alert("hello");
			phone.text("Enter Valid Phone");
			phone.addClass("error");
			return false;
		}
		//if it's valid
		else{
			phone.text("");
			phone.removeClass("error");
			return true;
		}
	}
	
	function validateEmail(){
		//testing regular expression
		var a = $("#email").val();
		var filter = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
		//if it's valid email
		if(filter.test(a)){
			email.text("");
			email.removeClass("error");
			return true;
		}
		//if it's NOT valid
		else{
			email.text("Enter Valid eMail");
			email.addClass("error");
			return false;
		}
	}
})
</script>

here is the form that i have. The reason why i want to keep the form is because i have already had the css developed for this. 

<div class="form-section">
<form action="thanks.php" method="post" class="form">
	<span>Free Consultation</span>
	<i></i>
	<div class="form-input">
	   <label for="name" name="name" class="clearfix"><small>Full Name:</small>
	   <input type="text" placeholder="*Required" id="name">
           <i> </i></label>
	
           <label for="phone" name="phone" class="clearfix"><small>Phone:</small>
	   <input type="text" placeholder="*Required" id="phone"> 			           <i> </i></label>
	
           <label for="email" name="email" class="clearfix"><small>Email:</small>
	   <input type="text" placeholder="*Required" id="email">
	   <i> </i></label>
    </div>
       <div class="custom-form form-input">
	   <label name="date" class="clearfix"><small>Request for:</small>
	   <input type="text" placeholder="*Optional" id="datepicker">
        	</label>

	<div class="form-input select clearfix">
            <label name="time" for="name">at:</label>
		<select>
												           <option>--Select Time--</option>
		   <option>09:10AM</option>								   <option>11:10AM</option>
		   <option>11:10AM</option>
		   <option>13:10PM</option>
		   <option>15:10PM</option>
	 										                  </select>
	      </div>
           </div>

	<input type="submit" value="Request Appointment">
<p>We will contact you to set a final appointment time that best accomodates your request</p>
</form>
</div>

Thanks in advance

Link to comment
Share on other sites

At a quick glance I noticed a few problems.

 

Your main issue is that in your submit handler your if statement is messed up.

 

 

if(validateName() & validatePhone() & validateEmail())

 

You want to be using the AND operator, &&.

 

One other small thing I noticed is that inside of your validateName function you have a typo with one of the variable names:

 

nameo.text("Enter Name");

 

That should be name, not nameo.

Link to comment
Share on other sites


$('#submit').click(function(){
if(validateName() && validatePhone() && validateEmail())
{
var name = document.getElementById('name').value;

var phone = document.getElementById('phone').value;

var email = document.getElementById('email').value;

//alert(email);

check_user(name, phone, email,);
$('#pmsg').show();
return true


}
else
{
return false;
}
});

function validateName(){
//if it's NOT valid
if(name.val()==''){
name.text("Enter Name");
name.addClass("error");
return false;
Link to comment
Share on other sites

You have a few errors, first you are adding the validation function to your button click using the id selector #submit, but you don't have an button with the id submit. You should add the validation function to the form submit event (e.g. $('.myform').submit(function(evt) {...}) ;)

 

Second part, you need to use preventDefault() to stop the submit event if it fails validation.

 

You can find examples here http://api.jquery.com/submit/

Edited by nogray
Link to comment
Share on other sites

Sorry, i had added the id="submit" a few hours earlier trying to get this thing to work properly and it didn't do anything for me. 

 

Maybe (e.g. $('.myform').submit(function(evt) {...}) could help. Although i wouldn't know where to put that. 

 

Also, not sure i am using the preventdefault() right either. I am trying to get this done before i send it off to a dev for more complicated things... lol, i have done php forms before and haven't had issues like this. i thought that it was going to be cake.

<div class="form-section">
<form action="thanks.php" method="post" class="form">
	<span>Free Consultation</span>
	<i></i>
	<div class="form-input">
	   <label for="name" name="name" class="clearfix"><small>Full Name:</small>
	   <input type="text" placeholder="*Required" id="name">
           <i> </i></label>
	
           <label for="phone" name="phone" class="clearfix"><small>Phone:</small>
	   <input type="text" placeholder="*Required" id="phone"> 			           <i> </i></label>
	
           <label for="email" name="email" class="clearfix"><small>Email:</small>
	   <input type="text" placeholder="*Required" id="email">
	   <i> </i></label>
    </div>
       <div class="custom-form form-input">
	   <label name="date" class="clearfix"><small>Request for:</small>
	   <input type="text" placeholder="*Optional" id="datepicker">
        	</label>

	<div class="form-input select clearfix">
            <label name="time" for="name">at:</label>
		<select>
												           <option>--Select Time--</option>
		   <option>09:10AM</option>								   <option>11:10AM</option>
		   <option>11:10AM</option>
		   <option>13:10PM</option>
		   <option>15:10PM</option>
	 										                  </select>
	      </div>
           </div>

	<input type="submit" name="submit" id="submit" value="Request Appointment">
<p>We will contact you to set a final appointment time that best accomodates your request</p>
</form>
</div>
Edited by AllenCole
Link to comment
Share on other sites

Just go to the jQuery url I posted earlier. It has very clear and easy to follow examples. Also, I wouldn't recommend using name="submit" or id="submit" in a form element because it will cause a conflict in some browsers.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.