Ok, lets see if we can get somewhere!
First off, it works perfectly in the contact form that I have. Here is the contact form. (I have condensed it slightly.) As you can see the JS validation requires the “required” parameter in the field. If the user tries to submit the form without filling it in, it will turn red, and display an error message in the “help-block” element. (As per error class Bootstrap styling.)
{exp:email:contact_form charset="utf-8" recipients="[email protected]" redirect="none" return="http://myurl | Return to Home Page"}
<div class="control-group">
<label><strong>Your email address:</strong></label>
<div class="controls">
<input id="from" class="text" type="email" name="from" value="{member_email}" required/>
/p>
</div>
</div>
<div class="control-group">
<label><strong>Your name:</strong></label>
<div class="controls">
<input class="span6" size="25" type="text" name="name" required/>
/p>
</div>
</div>
<button type="submit" class="btn btn-success" name="submit"><i class="icon-envelope icon-white"></i> Send message</button>
{/exp:email:contact_form}
However, this is not happening in Safecracker. In both forms the jqBootstrapValidation.js is loaded in the HEAD.
<link media="all" rel="stylesheet" type="text/css" href="/-/css/all.css" />
<link media="all" rel="stylesheet" type="text/css" href="/-/css/basic-jquery-slider.css" />
[removed][removed]
[removed][removed]
[removed][removed]
[removed][removed]
[removed][removed]
[removed][removed]
and at the start of the BODY…
[removed]
$(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );
[removed]
Now I tried adding the “required” to the first field of my safecracker form, (the code below just shows the form tags and first field)
{exp:safecracker id="addwalk" channel="walks" return="forms/thanks" status="Pending" logged_out_member_id="1" dynamic_title="[walk_name]" }
<fieldset>
<div class="control-group">
<label for="walk_name"><strong>1. Walk Name</strong></label>
<div class="controls">
<input type="text" class="span6" name="walk_name" id="walk_name" value="{walk_name}" required/>
/p>
</div>
</div>
<button type="submit" class="btn btn-success" name="submit"><i class="icon-ok icon-white"></i> Submit this walk</button>
</fieldset>
{/exp:safecracker}
This field displays fine, and when you click into it to start typing, it turns red (as it should) but when you start typing it returns to a normal text field, whereby it should be styled green.
Looking at the javascript console (chrome) for the safecracker form, I have the following error message…
Uncaught TypeError: Object [object Object] has no method ‘jqBootstrapValidation’
I hope this helps, I’m not quite sure where to go. Still new to EE, but learning all the time. Happy to follow any instructions or add anything else you need to know, but need some direction to help solve this one!
Thanks