complicated form validation

[AllenCole]

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

[trq]

You haven't told us what the issue is.

[AllenCole]

I am sorry, what is happening is that its not validating, its going strait to the thanks.php. 

 

you can just not fill out the form and click on submit and go to the thanks.php.

[Alex]

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.

[AllenCole]

So, i made the suggested changes, i am now using the AND operator, &&.

 

The validation is still doing nothing. You can still click strait threw to the thanks.php

[AllenCole]

There is always the posibility that i have done something wrong though. I am no php programmer. 

 

I work in joomla normally.

 

Edited: here so  i don't keep posting new.

Edited April 10, 2014 by AllenCole

[AllenCole]

$('#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;

[nogray]

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 April 10, 2014 by nogray

[AllenCole]

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 April 10, 2014 by AllenCole

[nogray]

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.