jQuery validate Engine Not Work with Bootstrap Select plugin - javascript

I work with jQuery Validate Engine Plugin and bootstrap. This Plugin Worked But when I change dropdown selectbox Style using bootstrap-select plugin, validate engine not work.
HTML:
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-header well" data-original-title>
<h2><i class="icon-picture"></i>Change Password</h2>
</div>
<div class="box-content">
<form action="#" id="fm">
<div class="control-group">
<label class="control-label" for="disabledInput">Email</label>
<div class="controls">
<select name="sport" id="sport" class="validate[required]">
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</div>
</div>
<input type="text" name="test" id="test" class="validate[required] text-input" />
<input type="submit" name="submit" />
</form>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
JS:
jQuery(document).ready(function () {
// binds form submission and fields to the validation engine
jQuery("#fm").validationEngine();
});
$('select').selectpicker();
DEMO HERE : http://jsfiddle.net/Sambora/84PVv/2/
In action When we select any value in selectbox jQuery Validation Engine Not Work and Show error Box.
How do fix this problem?

I got a solution without modifying the core js file. For this we need to use validationEngine "prettySelect","usePrefix" options, and we need to add "id" to cloned element and also need to removed the "validate[required]" class from this element. The full code look likes this.
var prefix = "selectBox_";
jQuery(document).ready(function() {
// for remove bootstrap-select validation and adding id to the element with prefix
$('select').each(function() {
$(this).next('div.bootstrap-select').attr("id", prefix + this.id).removeClass("validate[required]");
});
jQuery("#registration").validationEngine('attach',{
promptPosition: "bottomLeft",
autoHidePrompt:true,
prettySelect : true,
usePrefix: prefix
});
});
It works for me. DEMO HERE : http://www.scriptlodge.com/code_demos/validationEngine/
For detail, Please go to my blog link http://www.scriptlodge.com/jquery-validationengine-not-work-with-bootstrap-select-plugin/

When bootstrap-select creates a cloned element, it uses an addClass call that copies the validate[.*] class into the new div element, and validationEngine tries to validate that.
This can be remedied by modifying the setStyle function to strip that part of the class attribute out (around line 272 of bootstrap-select.js):
this.$newElement.addClass(this.$element.attr('class').replace(/selectpicker|mobile-device|validate\[.*\]/gi, ''));
Note the change is simply: |validate\[.*\] in the regular expression.
This keeps the new DIV element from being "validated" by the validationEngine script.
After adding this, validationEngine works with bootstrap-select.
I've submitted a pull request to fix this and it has been merged into the latest version on github.
You can download the updated script here:
https://raw.githubusercontent.com/silviomoreto/bootstrap-select/master/bootstrap-select.js

Related

Bootstrap color picker not loading/working

I cannot understand why bootstrap color picker is not working. My code is the same as from the example I have used:
https:// itsjavi.com/bootstrap-colorpicker/
In the bundle config of my MVC app I have added
"~/Scripts/bootstrap-colorpicker.js",
"~/Scripts/bootstrap-colorpicker.min.js",
"~/css/bootstrap-colorpicker.css",
"~/css/bootstrap-colorpicker.min.css",
The code in the main.aspx
<div class="col-sm-9">
<div class="input-group demo2">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
And the code in the JS file
$(function () {
$('.demo2').colorpicker();
});
See what hapens
My app screenshot
How it should be screenshot
What I'm doing wrong ?
I had the same issue when using bootstrap-colorpicker#2.5.3
I upgraded to bootstrap-colorpicker#3.2.0 and it fixed the issue
Hope it helped...
The call to initialise the colorpicker should be against the input that it is intended to be use on... i.e. I believe your Main.aspx example is incorrect.
<div class="col-sm-9">
<div class="input-group">
<input type="text" value="#00AABB" class="form-control demo2" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
Notice that the class for .demo2 has been moved to the input for which the picker is intended to manipulate the value of the input box as you use it's controls for picking a color.

Select2 settings undefined error with jquery.validate

I am using Select2 as my dropdown. I am getting the following error even if I click inside dropdown:
This error occurs only when I use select2 inside my form, outside the form it is working perfectly.
Here is my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
$("#ddlUsers").select2();
</script>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Add User</label>
<div class="col-sm-10">
<select id="ddlUsers" class="form-control" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" onclick="onAddclick();return false;" class="btn btn-primary">Add User</button>
</div>
</div>
</form>
In the Select2 examples they Use classes to define the selected options have you tried this approach as the jQuery may be using the ID attribute for some thing else.
Also you label usually has the same ID as the input field it is for.
The "Inspect" image shows that the JavaScript/jQuery code generated six (6) errors.
At least two (2) of the errors were due to a TypeError about "settings". Since this code was not included in the original post, it is difficult to diagnose your problems with the information provided.
Review the error diagnostic information shown by "Inspect" and make the code changes to avoid these errors.
I'm not 100% if it's the case here, but this error can occur when the form contains dynamically added elements, that were not initialised by jQuery.validate .validator (validator property/object was not set). Then, as part of validation process, new element's .validator object's .settings property is accessed, but it's not there. I would suggest trying to run .validate() method on the form, immediately and after addition of any new element to the DOM.

Combobox losing properties when in form

I am using the combobox from this link: http://jqueryui.com/autocomplete/#combobox. When using this code on a normal page on my front-end, it works perfectly.
But when I try to integrate it into a form, it loses its properties, so it works only as a select, but I can't type anything.
The code looks somewhat like this:
<form>
...
<div style="float:left;margin-left:10px;">
<label for="nextdev1" style="color:white">Next Hop</label>
<div class="ui-widget">
<!-- rest of code here -->
</div>
</div>
</form>

how to fire an event when a toggle flip changes?

I'm trying to do a very simple thing: with the jQuery Mobile 1.1.1 framework, I'd like to disable a field when a toggle flip is on "manual".
Here is the HTML:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="toggleswitch">
</label>
<select name="toggleswitch" id="toggleswitch" data-theme="b" data-role="slider">
<option value="off">gps</option>
<option value="on">manual</option>
</select>
</fieldset>
</div>
and here is my JavaScript:
$('#toggleswitch').change(function(){
console.log("toggle");
});
At the moment, I can't even see the "toggle" word in the console. I think the change method doesn't even fire, but this is what I found in the online examples.
EDIT - I copied here a wrong example: the code I actually tested has the same "toggleswitch" id. The code is now edited the way I have it on my notepad++.
Your id on the select element is toggleswitch3, but in the JavaScript code you use toggleswitch. The names need to match in HTML and JavaScript, otherwise it can't work.
Did you put the code in the dom ready callback?
$(function() {
$('#toggleswitch').change(function(){ console.log("toggle"); });
});
PS: If you use id selector, no need to specify the element type.
Edit:
Also note you are using toggleswitch3 in the html as id, while using toggleswitch in the javascript.

creating a jQuery plugin, help selecting a parent

I am creating a plugin for jQuery to create pretty select boxes (I know there are some out there, but this is learning experience for me).
If all goes well I realease the plugin to the public, so I am trying to build it as flexible as possible, and for this reason I am struggling to select the parent form element that houses the select that I am trying to target. Regardless of how a user sets up there HTML, I want to be able to select the parent form element.
Below is my HTML,
<div class="grid_6 alpha quick_search">
<h3>Quick Search Talent</h3>
<form action="http://urbantalent.tv.local/search/quick" method="post" accept-charset="utf-8" class="quick_form"><div style="display:none">
<input type="hidden" name="csrf_urbantalent" value="a8db11249b37322da84d3a211a933b19" />
</div>
<div class="formRow drop_down">
<select name="type">
<option value="0" selected="selected">I'm looking for...</option>
<option value="1">actors</option>
<option value="2">presenters</option>
<option value="3">voice overs</option>
</select>
</div>
<button type="submit" name="submit_search"><img src="http://urbantalent.tv.local/media/images/site/quick_submit.png" /></button>
</form>
</div>
As you can see from this HTML the selects parent is actually, .formRow how can I select the just the parent form, I have tried doing this,
$(this).parent('form') however this doesn't work as we know that form is not actually the parent.
You need this:
$(this).closest("form")
jQuery reference: http://api.jquery.com/closest/

Categories

Resources