This one is strange. So i've implemented the jQuery Validation on a site where I am using both Backbone.js and jQuery Mobile. On one form the validation works pretty much like the default where you see red text under the input fields (i had to change the placement so the text was not inside the field).
On another page for some reason the error messages don't show up the same way. They show up looking like a tooltip.
I've seen many posts on here for how to make the validation use Tooltips, however that is not what i want. I just want the standard plain-old red text.
If someone could take a look at this i would appreciate it. Here is a demo site where you can see the problem
http://demo.velexo.com/m2/
on that page if you navigate to the signup page and just click submit without filling in anything you will see how i want things to look. then go back to the login page and log in with these credentials (don't worry it's a demo site)
username: public
password: 99382lVAB8
on this page, click on Insurance Information, and then click submit. it will show the tooltip on the first input field.
Ok.. sorry guys i thought it would be best to have a live example but you are right, (i'll do it right next time). here is the relevant code:
First, there is a function which sets up my backbone router, at the end of that function i put this:
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {
error.appendTo(element.parent().parent().after());
}
});
Then the standard backbone routing takes over until you click the register page link. here is a stripped down version of the registerApp page which should show only what is relevant:
var registerApp = function() {
var app = {};
app.Register = Backbone.Model.extend({
url: api_url + '/m2/api/register',
});
app.RegisterMainView = Backbone.View.extend({
template: _.template($('#register-main-template').html()),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
app.AppView = Backbone.View.extend({
el: '#registerapp',
initialize: function () {
var register = new app.Register(regSteps);
var view = new app.RegisterMainView({model:register});
$('#main-content').append(view.render().el);
$('#main-content').trigger('create');
//$('#insurance-form').validate();
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
});
$('#insurance-form').validate({
rules: {
policy_provider: { required: true },
policy_number: { required: true },
start_date: { required: true },
end_date: { required: true }
}
});
},
events: {
'submit': 'onFormSubmit',
},
onFormSubmit: function(e) {
e.preventDefault();
console.log('submit form');
}
});
app.appView = new app.AppView();
}
and lastly, these are the templates that are used:
<script type="text/template" id="register">
<div id="registerapp">
<div data-role="header">
<h2 id="logo"> </h2>
</div>
<div class="ui-content" id="main-content">
</div>
<div data-role="footer" class="footerapp">
</div>
</div>
</script>
<script type="text/template" id="register-main-template">
<form action='/m2/api/register/' method='post' id='register-main' class="ui-mobile">
<div class="ui-body ui-body-a ui-corner-all col">
<div>
<div data-role="collapsibleset" id="registration-steps">
<div data-role="collapsible" id="insurance">
<h3><span>Insurance Information</span><img src="images/<%- ins_icon %>"/></h3>
<form action="#" id="payment-forms" id="insurance-form">
<span>We just need some basic information about your insurance</span>
<div><input name="policy_provider" id="policy_provider" type="text" placeholder="Policy Provider" required/></div>
<div><input name="policy_number" id="policy_number" type="text" placeholder="Policy Number" required/></div>
<div><input name="start_date" type="text" placeholder="Start Date" required/></div>
<div><input name="end_date" type="text" placeholder="End Date" required/></div>
<button name="submit_insurance" id="submit_insurance" type="submit" class="ui-btn">Submit Insurance Info</button>
</form>
</div>
</div>
</div>
</div>
</form>
</script>
And in the process of cleaning this up for post here i realize i'm doing some pretty dumb things. like having a form within a form, pretty sure that's a bad idea.
