Develop Reference

trigger change event after picking from dropdown

I have a JQuery timepicker defined as
<div class="form-group">
<label class="col-xs-4 col-md-3 control-label" align="right">
<div class="pull-right">{{ jc_settings_form.meeting_time.label() }}</div>
</label>
<div class='col-xs-8 col-md-9 dateContainer' style="max-width:200px">
<div class='input-group input-append date'>
<input type="select" class="form-control timepicker" name="meeting_time" id="meeting_time"/>
</div>
</div>
</div>
This is one option within a form and I would like to run automatic validation of the form whenever the user changes a field so I have some javascript like
$('.manage_jc_settings_form')
.formValidation({
framework: 'bootstrap',
excluded: ':disabled',
ignore: [],
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
meeting_time: {
validators: {
notEmpty: {
message: 'Please provide a meeting time'
}
}
},...
for any reason if I pick a time from the timepicker dropdown it does not trigger the change even and therefore does not validate the form? If I click into the text field and change the time manually it does trigger the change even?
Here is my timepicker initialisation
(function($) {
$(function () {
$('#meeting_time').timepicker({
defaultTime: '{{ jc_settings_form.meeting_time.default }}',
dropdown: true,
scrollbar: true,
startTime: '9:00 am',
timeFormat: 'h:mm a', // equivalent to 'h:mm a'
interval: 5 //Number of minutes the up/down arrow's will move the minutes value in the time picker
});
});
})(jQuery);
any idea how to force it to trigger the change event? I thought maybe I have to change the type="text" attribute of the input field?

You can run a function on the change event for jQuery Timepicker like this:
(function($) {
$(function () {
$('#meeting_time').timepicker({
defaultTime: '{{ jc_settings_form.meeting_time.default }}',
dropdown: true,
scrollbar: true,
startTime: '9:00 am',
timeFormat: 'h:mm a', // equivalent to 'h:mm a'
interval: 5,
change: function(time) {
alert('things changed');
}
});
});
})(jQuery);
It's listed on the docs here.

It is not entirely clear from your post what you are trying to do. If you are looking to validate the form every time a different is option is selected from the dropdown, you might want to try using onchange as follows:
<input type="select" class="form-control timepicker" name="meeting_time" id="meeting_time" onchange="yourValidationFunction()" />
I'd also consider moving away from jQuery whenever possible, as you will probably eventually find its syntactic sugar causes more problems than it solves (not to mention it considerably lengthens page load times).

Show error around radio buttons

The Jquery Validation plugin docs say you can validate that at least one radio button is selected. However, when trying to do so with some extra layout, I am not getting the error highlighting.
My code looks like this.
<div class="form-group" style="margin-top:25px;">
<label for="factorSelect" class="control-label col-sm-3">Please select a recovery method</label>
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-envelope"></i>
</span>
<div class="form-control" style="height:auto;">
<div class="radio">
<label class="noBold-text" style="font-size: 1em">
<input id="factorSelect_email" name="factorSelect" type="radio" value="EMAIL" />Send me an email
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
</label>
</div>
<div class="radio">
<label class="noBold-text" style="font-size: 1em">
<input id="factorSelect_sms" name="factorSelect" type="radio" value="SMS" />Send an SMS to my phone
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
</label>
</div>
</div>
</div>
</div>
$("#forgotPasswordForm").validate({
rules: {
fpUsername: {
required: true,
minlength: 3
},
factorSelect: {
required: true
}
},
messages: {
fpUsername: {
required: "Please enter your username or email",
minlength: "Your username must be at least {0} characters"
},
factorSelect: {
required: "You must select a recovery method"
},
},
highlight: function (element, errorClass, validClass) {
$(element).parents(".form-group").addClass("has-error").removeClass("has-success");
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".form-group").addClass("has-success").removeClass("has-error");
},
});
The has-error class never gets applied to the radio button group.

I reproduced the error you have in this CodePen...
The error message produced by jQuery Validate is positionned right after the invalid element... Which is the default.
Now you can position that error message elsewhere, using errorPlacement.
In this Solution, I just placed it right after the parent .input-group. I'm sure that is the puzzle piece you where looking for.
;)
errorPlacement: function(errorLabel, invalidElement){
if( $(invalidElement).is("[type='radio']") ){
var inputGroup = $(invalidElement).closest(".input-group");
inputGroup.after(errorLabel);
}
},
EDIT
With your full code, that is easier to work...
;)
The default behavior of a button in a form is to submit (Reference, see "type").
So if the type is omitted, that is what it does.
And the .validate() function isn't triggered by a button type="button".
So...
You have to prevent the default submit in order to validate first.
Then, submit if the form is valid.
This is achieved by .preventDault() and submitHandler
$("#forgotPasswordForm").on("submit",function(e){
e.preventDefault(); // Prevents the default form submit (Have to validate first!)
})
.validate({
// Skipping some lines here...
submitHandler: function(form) {
form.submit(); // Submits only if the form is valid
}
});
Updated CodePen

Ok, fixed it. Thank you for the help above with the placement of the error message. That was not my initial issue but did come up once I got the error to display at all. Your fix works great.
My primary issue turned out to be a CSS conflict with some styles that turn the radio buttons into pretty font-awesome icons. The little snippet that hides the default radio buttons causes the validation to fail as it must only look for visible fields. I set the height to zero instead and so far it seems to work.
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
/*display: none;*/
height:0;
}

bootstrapValidator-enable and disable field validation

So; I tried to check couple of solutions online but I couldn't find a solution that solve my problem regarding enabling and disabling field validation using bootstrapvalidator.
I have a field that supposed to give error when someone enter a negative number (e.g -4,-100,-545 etc.), and any number that is not numeric (e.g 4.4.4, 4.r, 4t etc).
But I want to put a condition that wont give error when a user type in -999.
Code is working well when a user enter other number that is not a negative and nob-numeric. And if a user enters negative or non-numeric number, error is displayed. The problem when user enters -999 it validate true(don't show error), but if user change number(-999) to other number such as negative number and nun-numeric number, my field validation stop working (meaning don't show any error though it was supposed to show).
So how can I enable and disable field validation or setting up a condition on field validation to solve my problem using bootstrapValidator..???
Hope you guys have already come across with such a problem and I hope you can help me solve the puzzle.
You can try it here: https://jsfiddle.net/os3b0dqx/ to see how it works
my template.html looks like:
<form class="well form-horizontal" action=" " method="post" id="myform">
<div class="form-group">
<label class="col-xs-3 control-label">Length</label>
<div class="col-xs-5">
<input type="text" class="form-control" id="length" name="length" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-1">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$('#myform').bootstrapValidator({
feedbackIcons: {
validating: 'glyphicon glyphicon-refresh'
},
fields: {
length: {
validators: {
greaterThan: {
value:0,
message: 'The value must be greater than or equal to zero'
},
numeric: {
message: 'The value is not a number',
thousandsSeparator: '',
decimalSeparator: '.'
},
notEmpty: {
message: 'Please fill the length' }
}
},
}
}).on('click keyup input change','[name="length"]',function(){
if ($(this).val() == -999) {
$('#myform').bootstrapValidator('enableFieldValidators','length',false);
}
else{
$('#myform').bootstrapValidator('validateField','length');
//$('#myform').bootstrapValidator('enableFieldValidators','length',true);
// both "validateField" and "enableFieldValidators" doesn't work for me..
}
});
});

change this if ($(this).val() == -999) to if ($(this).val() == '-999')

How to submit form with Bootstrap Validator

I am using http://bootstrapvalidator.com/ with visual studio in bootstrap asp.net project.
Problem I am having that I can never get validate button to actually validate like it does in examples, it validates fine when I start typing into textbox, but never validates when I click on button following examples.
Another issue is I don't know how to call my c# method which will get value from textbox after validation was successful, I can call my method on button click, but I want it to happen just after validation was successful .
What I am looking for is simple example how to make submit button validate fields and then call my c# method which will read values from inputs.
I been unable find even single example online , and I dont know much about javascript.
Here is some testing code I have
<div class="form-group" id="nameEmail2">
<div class="form-group">
<label for="inputContactName" class="col-sm-5 control-label">Contact Name </label>
<div class="col-sm-7">
<input type="text" class="form-control" name="fullName1" id="TextBox1" placeholder="Contact Name" maxlength="50"/>
</div>
</div>
<div class="form-group">
<label for="inputContactEmail" class="col-sm-5 control-label">Contact Email <b>*</b></label>
<div class="col-sm-7">
<input type="text" class="form-control" name="email1" id="TextBox2" placeholder="Contact Email" maxlength="50"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-3">
<button type="submit" runat="server" onserverclick="submitValidate" class="btn btn-default">Validate</button>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#nameEmail2').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fullName1: {
validators: {
notEmpty: {
// enabled is true, by default
message: 'The full name is required and cannot be empty'
},
stringLength: {
enabled: true,
min: 8,
max: 40,
message: 'The full name must be more than 8 and less than 40 characters long'
},
regexp: {
enabled: false,
regexp: /^[a-zA-Z\s]+$/,
message: 'The full name can only consist of alphabetical, number, and space'
}
}
},
email1: {
validators: {
emailAddress: {
message: 'The value is not a valid email address'
}
}
}
}
});
});
</script>
I have removed most of asp objects and almost nothing runs at server any more, but that didnt help much here is my codebehind method
protected void submitValidate(object sender, EventArgs e)
{
string contactName = Request.Form["fullName1"];
string email = Request.Form["email1"];
System.Diagnostics.Debug.Write("test",email);
}

Found an answer to my own question
http://thuyvk.com/article/validate-form-su-dung-bootstrapvalidator-cho-website-aspnet-224
Be careful with google translate, will translate code into some random html code

Selectize.js and jQuery validation

I'm trying to validate a form that uses the Selectize.js to select and jQuery Validation plugin for validation.
I can not make it work. The script validates the input fields, but not the select:
<form id="test" method="post" action="#">
Name: <input name="name" type="text">
<select name="person" id="select-beast" class="demo-default" placeholder="Select">
<option value="">Select...</option>
<option value="1">First</option>
<option value="2">Second</option>n>
</select>
<button type="submit" class="btn btn-primary col-md-12 col-lg-12">Go</button>
</form>
JS:
$('#select-beast').selectize({
create: true,
sortField: 'text'
});
// validate signup form on keyup and submit
$("#test").validate({
errorElement: 'label',
errorClass: 'error',
rules: {
name: {
required: true
},
person: {
required: true
}
},
messages: {
name: "Insert name.",
person: "Insert person.",
}
});
http://jsfiddle.net/8nVqS/

The reason is that jQuery.validation plugin will ignore all hidden element when validating by default.
And Selectize.js will hide the given jQuery object, So your name field will run validate but person field will not.
Solution, please reference this gist: How to validate selectize.js comboboxes with the jQuery validation plugin

The answers provided above aren't working with selectize.js v0.12.3 or greater.
That is happening due to the fact that the required attribute is removed from the select in refreshValidityState function - see https://github.com/selectize/selectize.js/commit/abc8a560a8335a017790c2a799925cc123670bfc
A quick fix for this is to add the selects that are required in the rules array of the validation options object.
Example:
var validator = $("#form").validate({
ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input',
rules: {
"select-name-here": "required",
"select-name-here2": "required"
}
});

I am using
ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input',
and it works for me.