0

Hi People,

Got some jquery issue.
I'm validating a Contact form. All fields are working fine except <textarea>
I mean I wanna make all fields mandatory including textarea...

---------------------------------------------------------

HTML CODE

---------------------------------------------------------

<div class="formbox">

<form id="contact_form" action="#" method="post">

<span class="error" id="name_error">Please Enter Name !</span>
<span class="error" id="email_error">Please Enter Email address !</span>
<span class="error" id="email_error2">Please Enter Valid Email Address !</span>
<span class="error" id="phone_error">Please Enter Phone Number !</span>
<span class="error" id="aboutme_error">Please Fill About Me Field !</span>
<br/><br/>

<label>Name: </label> <input type="text" name="name" id="name" size="40"><br/><br/>
<label>Email: </label> <input type="text" name="email" id="email" size="40"><br/><br/>
<label>Phone Number: </label> <input type="text" name="phone" id="phone" size="40"><br/><br/>
<label>About Me: </label> <textarea name="aboutme" id="aboutme"> </textarea>

<br/><br/>

<input type="submit" class="submitbtn" value="Submit">

</form>


</div>

<div class="successmsg">
<h3>
Contact Form Submitted. We will contact you soon.

</h3>
<br/>
<h3>
<a href="#">Back To Website</a>
</h3>
</div>

---------------------------------------------------------

And then my jquery code is like....

---------------------------------------------------------

jQuery(function() {
jQuery('.error').hide();
jQuery('.successmsg').hide();

jQuery(".submitbtn").click(function() {
// validate and process form
// first hide any error messages
jQuery('.error').hide();

var name = jQuery("input#name").val();
if (name=="Name" || name == "") {
jQuery("span#name_error").show();
jQuery("input#name").focus();
return false;
}


var email = jQuery("input#email").val();
if (email == "Email" || email == "") {
jQuery("span#email_error").show();
jQuery("input#email").focus();
return false;
}

var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(email)) {
jQuery("span#email_error2").show();
jQuery("input#email").focus();
return false;
}


var phone = jQuery("input#phone").val();
if (phone == "Contact Number" || phone == "") 
{
jQuery("span#phone_error").show();
jQuery("input#phone").focus();
return false;
}


var aboutme = jQuery("textarea#aboutme").val();
if (aboutme == "") 
{
jQuery("span#aboutme_error").show();
jQuery("textarea#aboutme").focus();
return false;
}

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone + '&aboutme=' + aboutme;

//alert(dataString);return false;

jQuery.ajax({
type: "POST",
url: "contactus.php",
data: dataString,
success: function() {

jQuery('.formbox').hide();

jQuery('.successmsg').fadeIn(4000);

}
});
return false;
});
});

---------------------------------------------------------

All other fields are validating fine.... issue is only with textarea. Form gets submitted even if textarea is empty.

Any idea what I'm doing wrong..?

Thanx and sorry for such lengthy post.

---------------------------------------------------------

Edited by Albert Pinto

2
Contributors
3
Replies
19
Views
4 Years
Discussion Span
Last Post by pixelsoul
3

Yup, change this

<label>About Me: </label> <textarea name="aboutme" id="aboutme"> </textarea>

To this:

<label>About Me: </label> <textarea name="aboutme" id="aboutme"></textarea>

The white space in the textarea is allowing it validate.

Votes + Comments
Legend. Thank you!!!
Thanx Sir..
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.