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.

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

Recommended Answers

All 3 Replies

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.

commented: Thanx Sir.. +2
commented: Legend. Thank you!!! +0

Yeah that worked... couldn't believe the issue was there.... Thanx...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.