CODEWITHSUNDEEP
jqueryjquery-mobilejquery-validate
Able
Able

Reputation: 3912

Jquery validate message showing inside the text input in jquery mobile

I'm pretty new to jQuery mobile, I'm using jQuery Validate plugin for forms control validation, everything working fine, but the validation message shows along with the input text box. Here is the image:

Image of validation warnings next to inputs

Jquery

 $(document).live('pageinit', function (e) {
     $('#form1').validate({             
         submitHandler: function (form) {
             $.mobile.changePage('#success', { transition: "slide" });
             return false; 
         }
     });
 });

HTML

    <div data-role="fieldcontainer">
        <label for="fname" data-theme="d">First Name:</label>
        <input type="text" id="fname" name="fname" data-theme="d" placeholder="Enter First Name" required>
        <br />
    </div>           
    <div data-role="fieldcontainer">
        <label for="lname" data-theme="d">Last Name:</label>
        <input type="text" id="lname" name="lname" data-theme="d" placeholder="Enter Last Name" required>
    </div>
    <div data-role="fieldcontainer">
        <label for="email" data-theme="d">E-mail Address:</label>
        <input type="email" id="email" name="email" data-theme="d" placeholder="Enter Email" required>
    </div>

Upvotes: 3

Views: 11274

Answers (2)

boustanihani
boustanihani

Reputation: 111

I recommend using the following code for JQM 1.4:

error.appendTo(element.closest('.ui-field-contain'));

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

DEMO

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo(element.parent().prev());
    }
});

CSS

.error{
    color:red;
    display:block; //to show error message in new line
}

Updated After OP's comment

Updated DEMO

errorPlacement: function (error, element) {
        error.appendTo(element.parent().parent().after());
},

another way DEMO

Reference

http://jqueryvalidation.org/validate/

Upvotes: 8

Related Questions