Thursday, May 23, 2024
 Popular · Latest · Hot · Upcoming
161
rated 0 times [  162] [ 1]  / answers: 1 / hits: 32821  / 11 Years ago, tue, june 25, 2013, 12:00:00

I am using jquery validate plugin to validate number in a form , how can i place the returned error message under the input button , i am unable to achieve,



Here is my image with the issue and what i need,pls check - http://i.imgur.com/Gt5aNxs.png



Please suggest me how to put the error message in a custom Div under the button instead of default underneath.



Here is my code:



<section id=contact class=content>
<div class=container>
<h2>Contact Form Demo</h2>
<div class=row>
<div class=span12 contact-form>

<form action=mail.php method=POST class=form-horizontal contact-form id=contact-form>
<!--<?php $formKey->outputKey(); ?> -->
<fieldset>

<div class=control-group>
<label class=control-label for=inputPhone>Phone</label>
<div class=controls>
<input class=input-80 name=phone type=text id=inputPhone placeholder=inc. country &amp; area code>
</div>
</div>


<div class=control-group>
<div class=controls>
<button type=submit value=Send class=btn id=btn-place>Send!</button>
</div>
<div >place here</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</section>

<!-- javascript -->
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js></script>
<script src=js/jquery.validate.min.js></script>



<script>

// contact form validation
$(document).ready(function(){

$('#contact-form').validate(
{
rules: {
name: {
minlength: 3,
required: true
},
email: {
required: true,
email: true
},
phone: {
minlength: 11,
required: false,
number: true
},
subject: {
minlength: 3,
required: true
},
message: {
minlength: 20,
required: true
}
},
highlight: function(label) {
$(label).closest('.control-group').addClass('error');
},
success: function(label) {
label
.text('OK!').addClass('valid')
.closest('.control-group').addClass('success');
}
});

// contact form submission, clear fields, return message,script no shown here

</script>

More From » jquery

 Answers
14

All you need to do is specify the errorLabelContainer in your options and specify the div you want the errors to go into:



$('#contact-form').validate({
//all your other options here
errorLabelContainer: '#errors'
});


Then just make sure you specify that your place here div has the id errors like this:



<div id=errors></div>


See a working example here: http://jsfiddle.net/ryleyb/aaEFQ/ (note that I also specified the wrapper option, which you'll probably want if there are multiple errors).


[#77418] Monday, June 24, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
irvingjamieb

Total Points: 743
Total Questions: 113
Total Answers: 128

Location: Suriname
Member since Sun, Jun 13, 2021
3 Years ago
;