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.
Related
I integrated the Google reCaptcha into a website form. Before, on form submit the webapp checked if all form filed were filled in. After I integrated the reCaptcha, this form check does not run anymore and the form ist send even when the fields are empty.
I tried to find the javascript that does the checks but could not find it. I ran the Firefox DevTools Runtime Analysis and checked the Flame Chart to see the javascript call stack. There I found some jquery functions but afaik that can not be the whole story, as form field checks are not done by jQuery.
By what menas can I find out, what javascript function is called to do the check? Or could the checks be done elsewhere, e.g. in CSS.
Strange too: The posted error message "Please fill in this field" can not be found anywhere in the entire project code. I checked in my IDE.
The Webpage uses twitter Bootstrap, jQuery 1.12.4 and runs on Silverstripe CMS 3.6 with userforms module (although this particular form appears in the correseponding page template).
I appreciate any hint. I allready spent hours with this issue.
I had 2 problems there:
- first: I had a submit button with id="submit" as in Google reCaptcha documentation example (https://developers.google.com/recaptcha/docs/invisible). However, this can cause "confusing failures" if used with jQuery (http://api.jquery.com/submit/). So I renamed the button id="submit_button" and the form was submitted.
- second: Form validation was done by HTML5 which I did not know exists.This was activated with the "required" attributes is the input form fields. Shame on me!
My form now works and looks like this:
<h2>Anfrage</h2>
<form action="formaction.php" method="post" id="form-offer" class="form-std form-offer" enctype="multipart/form-data" >
<fieldset>
<label>Firma * <input name="firma" required="" type="text"></label>
<select name="anrede" required="">
<option value="">Anrede *</option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<label>Name und Vorname Kontaktperson *<input name="vorname" required="" type="text"></label>
<label>PLZ & Ort *<input name="ort" required="" type="text"></label>
<label>Adresse *<input name="adresse" required="" type="text"></label>
<select name="land" required="">
<option value="">Land *</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Ägypten">Ägypten</option>
<option value="Aland">Aland</option>
<option value="Albanien">Albanien</option>
</select>
<label>E-Mail *<input name="email" required="" type="email"></label>
<label>Telefon *<input name="telephone" required="" type="text"></label>
</fieldset>
<div class="g-recaptcha"
data-sitekey="sdfsdfsdfsdfsdf"
data-size="invisible"
data-callback="formSubmit">
</div>
<button id="submit_button">Send<i class="icon icon-chevron-right"></i></button>
<input name="block" value="167" type="hidden">
<input name="locale" value="de_DE" type="hidden">
</form>
<link rel="stylesheet" type="text/css" href="body.min.css">
<script src="jquery-12.js"></script>
<script defer="" src="main.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
(function($, document, undefined){
$('#form-offer').submit(function (event) {
event.preventDefault();
grecaptcha.reset();
grecaptcha.execute();
});
})(jQuery, document, undefined);
function formSubmit(response) {
// submit the form which now includes a g-recaptcha-response input
var myForm = document.getElementById("form-offer");
myForm.submit();
}
</script>
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>
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
I have a webpage that uses a JavaScript function to populate a second dropdown box when an item from a first dropdown box is picked. The function creates the second drop down changing this:
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
</div>
</td>
to this:
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
<select name="personName">
<option value="Bob" name="personName">Bob</option>
<option value="Jim" name="personName">Jim</option>
<option value="Tom" name="personName">Tom</option>
</select>
</div>
</td>
My problem is that when the form button is pressed it does not POST the personName value chosen from the created list. If I write exactly the same code manually, so the function is not called, then it works. If I use the function to create the list it doesn't (no string at all gets POSTED). Why might this be?
You may have a conflict with the name property. Remove the name property from all of the options;you only need it on the select element. Also, make sure (recommend using Firebug) that the markup you are giving above is literally what does get produced; I've had before where injecting elements aren't in the <form> tag as expected, depending on how it's used sometimes.
You are not closing your form tag. Probably there lies your issue.
The HTML generated content should work to POST your values. Probably because the FORM is not closed, the browser will close it for you on a spot you do not expect.
Also you only need a name attribute on your SELECT.
Try this.
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
</div>
</form>
</td>
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
<select name="personName">
<option value="Bob" >Bob</option>
<option value="Jim" >Jim</option>
<option value="Tom" >Tom</option>
</select>
</div>
</form>
</td>
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/