jquery validate input array and passing dynamic values - javascript

I'm trying to validate a group of input arrays using jquery validator plugin. I'm having problems understanding how to pass another element into the validation.
My code so far:
$('#edit-fixtures').validate({
rules: {
"player_a[]": {
required: true,
uniqueMatch: function () {
return $(this).next('.player').val();
},
},
"player_b[]": {
required: true,
uniqueMatch: function () {
$(this).closest('.player').val();
},
},
}
});
My input elements are a series of paired select boxes named player_a[] player_b[] There are about 40 pairs. Each pair should be unique and that's what i'll be validating.
I'm trying to pass the value of the nearest player_b to the changed player_a and vice versa.
I have a change method to validate on each change:
$(".player").change(function () {
var check = $(this).valid();
console.log("validation:", check);
});
I'm still working on the validation method but cant seem to get the parameters to the method correctly.
Is there a way of doing this?

uniqueMatch: [$item1, $item2, ....]
$.validator.addMethod('uniqueMatch', function(value, element, parameterValue) {
var item1Value = $(parameterValue[0]).val();
//and so on...
//Based on values, you return true or false;
//Voila!
}

Related

Select2 change input name if tag is being submited

So I have the following select2:
productFamilySelect.select2({
tags: true
});
By default the name of the associated select element is product_family_id, so is there a way to change the name of the input to lets say product_family_name, if selected value if one that user entered? This is so, that I could in the backend for sure distinguish between an already existing value, and one that user thought of. Checking by id in the database does not really suit, as this value could actually be numeric in on itself.
After some digging into select2 custom events I found a way:
firstly add createTag callback like so:
productFamilySelect.select2({
tags: true,
createTag: function (params) {
var term = $.trim(params.term);
if (term === '') {
return null;
}
return {
id: term,
text: term,
newTag: true
}
}
});
Then, add the following listener:
productFamilySelect.on('select2:select', function (e) {
if (e.params.data.newTag === true) {
$(this).attr('name', 'product_family_name');
} else {
$(this).attr('name', 'product_family_id');
}
});
Seems a bit hacky, since it is outside the config of the actual select2 config, but well it dos the job :)

Using an input field containing a RegEx and Jquery to validate a form

I'm attempting to have Jquery validate a form using regular expression, but in an unconventional way. The form id is "sumform" and a textarea within the form is called "summary." I have another input field (id="terms_out") outside of the form which contains the regular expression. I can't seem to get the Jquery validator to recognize the value of "terms_out" as a regex. My form ends up being submitted when the user enters anything.
I've tried this but it doesn't work...
$(function() {
$.validator.addMethod("regex", function(value, element, regexpr) {
return regexpr.test(value);
}, "Sorry, you haven't used all the terms.");
$("#sumform").validate({
rules: {
summary: {
required: true,
regex: '#terms_out',
}
}
});
});
This works perfectly fine...
$(function() {
$.validator.addMethod("regex", function(value, element, regexpr) {
return regexpr.test(value);
}, "Sorry, you haven't used all the terms.");
$("#myForm").validate({
rules: {
experience: {
required: true,
regex: /^(?=[\S\s]*\bcell|cells|cell\b)(?=[\S\s]*\bDNA|DNA|DNA\b)(?=[\S\s]*\bsense|senses|sense\b)(?=[\S\s]*\brespond|responds|respond\b)(?=[\S\s]*\benergy|energy|energy\b)(?=[\S\s]*\bgrow|grows|grow\b)(?=[\S\s]*\bdevelop|develops|develop\b)(?=[\S\s]*\breproduce|reproduces|reproduce\b)/
}
}
});
});
I'm very new at this so any help would be greatly appreciated. Thank you!
You can switch:
regex: '#terms_out',
to:
regex: $("#terms_out").val(),
EDIT:
$("#Form").validate({
rules: {
summary: {
required: true,
regex: new RegExp($("#terms_out").val())
}
}
});
That will take the value from the text area and insert it to ruls

jquery validate plugin on dynamic form inputs not working

I've a form where I'm having some fields and then if needed user can add more fields of same type. Im using http://jqueryvalidation.org/ validate plugin to validate fields.
As I read somewhere jquery validate plugin requires unique names to fields for validating them. So i'm naming each field uniquely. First I hoped that validate plugin will take care of dynamically added element's validation if I add rules using classes. But it turns out it does not.
So even if name of each field is unique, validate plugin validates only first input which was rendered initially.
I even tried using $.clone() in hope that it'll take care of all event bindings. But it did not worked for me. So I moved to underscore to repeat the markup as there are number of fields and I don't want to write templates in JS and name accordingly.
I can't find a solution to this and stuck here. Can't more on until this issue is resolved.
Here's JS that I've written.
$("#work_form").validate();
$(".work_emp_name").rules("add", {
required: true
});
_.templateSettings.variable = "element";
var tpl = _.template($("#form_tpl").html());
var counter = 1;
$("form").on("click", ".add_employer", function (e) {
e.preventDefault();
var tplData = {
i: counter
};
$("#word_exp_area").append(tpl(tplData));
counter += 1;
});
Please find markup in fiddle set up.
example and code set up here
When using one of the methods from this plugin, like .rules(), and targeting more than one element, like a class, you must also use the jQuery .each() method.
$('.work_emp_name').each(function () {
$(this).rules("add", {
required: true
});
});
And you cannot use .rules() on elements that don't yet exist in the DOM. Simply move the .rules() method to inside the function that creates your new inputs.
$("form").on("click", ".add_employer", function (e) {
e.preventDefault();
var tplData = {
i: counter
};
$("#word_exp_area").append(tpl(tplData));
counter += 1;
$('.work_emp_name').each(function () {
$(this).rules("add", {
required: true
});
});
});
Working DEMO: http://jsfiddle.net/Yy2gB/10/
However, you can make it more efficient by only targeting the one new field, instead of all fields with the work_emp_name class.
$("form").on("click", ".add_employer", function (e) {
e.preventDefault();
var tplData = {
i: counter
};
$("#word_exp_area").append(tpl(tplData)); // <- add new field
$('input[name="work_emp_name['+counter+']"]').rules("add", { // <- apply rule to new field
required: true
});
counter += 1;
});
Working DEMO: http://jsfiddle.net/Yy2gB/11/
Both of my examples above are for adding rules to the dynamically created fields. You'll still need to declare any rules for your static fields upon dom ready as follows...
$("#work_form").validate({
rules: {
"work_emp_name[0]": {
required: true
}
}
});
Returns the validations rules for the first selected element or
Adds the specified rules and returns all rules for the first matched element. Requires that the parent form is validated, that is, $( “form” ).validate() is called first or
Removes the specified rules and returns all rules for the first matched element.
more info
function addRule(id){
$("[name='work_emp_name["+id+"]']").rules("add", {
required: true
});
}
$("#work_form").validate();
addRule(0);
_.templateSettings.variable = "element";
var tpl = _.template($("#form_tpl").html());
var counter = 1;
$("form").on("click", ".add_employer", function (e) {
e.preventDefault();
var tplData = {
i: counter
};
$("#word_exp_area").append(tpl(tplData));
addRule(counter);
counter += 1;
}); here
That's because jQuery Validation only validates the first occurrence of the array currently.
You can check my commit on the plugin that will just work fine on any occurrence of the named array.

Add Same Rule Multiple Fields

I'm trying to add the same rules to html input elements with this naming convention:
name="elements[1]"
name="elements[2]"
I'm using jQuery and jQuery Validation Plugin:
var elements = $("#elementsFieldset :input");
$.each(elements, function(i, element) {
element.rules('add', {
required: true,
number: true
});
But I'm afraid that element is not the kind of object jQuery expects for adding rules.
I'm receiving:
Uncaught TypeError: Object #<HTMLInputElement> has no method 'rules'
Many thanks for any help.
Use $(this) instead of element.
element is HTML JavaScript Object.
to add rules you need jQuery Object i.e $(this)
var elements = $("#elementsFieldset :input");
$.each(elements, function(i, element) {
$(this).rules('add', {
required: true,
number: true
});
or even better
var elements = $("#elementsFieldset :input");
elements.each(function(){
$(this).rules('add', {
required: true,
number: true
});
Updated
Below code works for one element only if you want to apply rule for more than one element use .each() as used in above example.
$("#elementsFieldset :input").rules("add", {
required:true,
number:true
});
Read jQuery Validation Plugin - adding rules that apply to multiple fields commented by Sparky
jQuery Validation Plugin
Try this,
$.each(elements, function(i, element) {
$(this).rules('add', {// use $(this) instead of element
required: true,
number: true
});
or try it simply,
$("#elementsFieldset :input").rules("add", {
required:true,
number:true
});
You can add rule on a class See jQuery Validation using the class instead of the name value

jQuery UI autocomplete with item and id

I have the following script which works with a 1 dimensional array. Is it possible to get this to work with a 2 dimensional array? Then whichever item is selected, by clicking on a second button on the page, should display the id of whichever item is selected.
This is the script with the 1 dimensional array:
var $local_source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
$("#txtAllowSearch").autocomplete({
source: $local_source
});
This is the script for the button to check the id, which is incomplete:
$('#button').click(function() {
// alert($("#txtAllowSearch").someone_get_id_of_selected_item);
});
You need to use the ui.item.label (the text) and ui.item.value (the id) properties
$('#selector').autocomplete({
source: url,
select: function (event, ui) {
$("#txtAllowSearch").val(ui.item.label); // display the selected text
$("#txtAllowSearchID").val(ui.item.value); // save selected id to hidden input
}
});
$('#button').click(function() {
alert($("#txtAllowSearchID").val()); // get the id from the hidden input
});
[Edit] You also asked how to create the multi-dimensional array...
You should be able create the array like so:
var $local_source = [[0,"c++"], [1,"java"], [2,"php"], [3,"coldfusion"],
[4,"javascript"], [5,"asp"], [6,"ruby"]];
Read more about how to work with multi-dimensional arrays here: http://www.javascriptkit.com/javatutors/literal-notation2.shtml
From the Overview tab of jQuery autocomplete plugin:
The local data can be a simple Array
of Strings, or it contains Objects for
each item in the array, with either a
label or value property or both. The
label property is displayed in the
suggestion menu. The value will be
inserted into the input element after
the user selected something from the
menu. If just one property is
specified, it will be used for both,
eg. if you provide only
value-properties, the value will also
be used as the label.
So your "two-dimensional" array could look like:
var $local_source = [{
value: 1,
label: "c++"
}, {
value: 2,
label: "java"
}, {
value: 3,
label: "php"
}, {
value: 4,
label: "coldfusion"
}, {
value: 5,
label: "javascript"
}, {
value: 6,
label: "asp"
}, {
value: 7,
label: "ruby"
}];
You can access the label and value properties inside focus and select event through the ui argument using ui.item.label and ui.item.value.
Edit
Seems like you have to "cancel" the focus and select events so that it does not place the id numbers inside the text boxes. While doing so you can copy the value in a hidden variable instead. Here is an example.
My code only worked when I added 'return false' to the select function. Without this, the input was set with the right value inside the select function and then it was set to the id value after the select function was over. The return false solved this problem.
$('#sistema_select').autocomplete({
minLength: 3,
source: <?php echo $lista_sistemas;?> ,
select: function (event, ui) {
$('#sistema_select').val(ui.item.label); // display the selected text
$('#sistema_select_id').val(ui.item.value); // save selected id to hidden input
return false;
},
change: function( event, ui ) {
$( "#sistema_select_id" ).val( ui.item? ui.item.value : 0 );
}
});
In addition, I added a function to the change event because, if the user writes something in the input or erases a part of the item label after one item was selected, I need to update the hidden field so that I don´t get the wrong (outdated) id. For example, if my source is:
var $local_source = [
{value: 1, label: "c++"},
{value: 2, label: "java"}]
and the user type ja and select the 'java' option with the autocomplete, I store the value 2 in the hidden field. If the user erase a letter from 'java', por exemple ending up with 'jva' in the input field, I can´t pass to my code the id 2, because the user changed the value. In this case I set the id to 0.
Just want to share what worked on my end, in case it would be able to help someone else too. Alternatively based on Paty Lustosa's answer above, please allow me to add another approach derived from this site where he used an ajax approach for the source method
http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3
The kicker is the resulting "string" or json format from your php script (listing.php below) that derives the result set to be shown in the autocomplete field should follow something like this:
{"list":[
{"value": 1, "label": "abc"},
{"value": 2, "label": "def"},
{"value": 3, "label": "ghi"}
]}
Then on the source portion of the autocomplete method:
source: function(request, response) {
$.getJSON("listing.php", {
term: request.term
}, function(data) {
var array = data.error ? [] : $.map(data.list, function(m) {
return {
label: m.label,
value: m.value
};
});
response(array);
});
},
select: function (event, ui) {
$("#autocomplete_field").val(ui.item.label); // display the selected text
$("#field_id").val(ui.item.value); // save selected id to hidden input
return false;
}
Hope this helps... all the best!
Assuming the objects in your source array have an id property...
var $local_source = [
{ id: 1, value: "c++" },
{ id: 2, value: "java" },
{ id: 3, value: "php" },
{ id: 4, value: "coldfusion" },
{ id: 5, value: "javascript" },
{ id: 6, value: "asp" },
{ id: 7, value: "ruby" }];
Getting hold of the current instance and inspecting its selectedItem property will allow you to retrieve the properties of the currently selceted item. In this case alerting the id of the selected item.
$('#button').click(function() {
alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id;
});
<script type="text/javascript">
$(function () {
$("#MyTextBox").autocomplete({
source: "MyDataFactory.ashx",
minLength: 2,
select: function (event, ui) {
$('#MyIdTextBox').val(ui.item.id);
return ui.item.label;
}
});
});
The above responses helped but, did not work in my implementation.
The instead of using setting the value using jQuery, I am returning the value from the function to the select option.
The MyDataFactory.ashx page has a class with three properties Id, Label, Value.
Pass the List into the JavaScript serializer, and return the response.
I do not think that there is need to hack around the value and label properties, use hidden input fields or to suppress events. You may add your own custom property to each Autocomplete object and then read that property value later.
Here is an example.
$(#yourInputTextBox).autocomplete({
source: function(request, response) {
// Do something with request.term (what was keyed in by the user).
// It could be an AJAX call or some search from local data.
// To keep this part short, I will do some search from local data.
// Let's assume we get some results immediately, where
// results is an array containing objects with some id and name.
var results = yourSearchClass.search(request.term);
// Populate the array that will be passed to the response callback.
var autocompleteObjects = [];
for (var i = 0; i < results.length; i++) {
var object = {
// Used by jQuery Autocomplete to show
// autocomplete suggestions as well as
// the text in yourInputTextBox upon selection.
// Assign them to a value that you want the user to see.
value: results[i].name;
label: results[i].name;
// Put our own custom id here.
// If you want to, you can even put the result object.
id: results[i].id;
};
autocompleteObjects.push(object);
}
// Invoke the response callback.
response(autocompleteObjects);
},
select: function(event, ui) {
// Retrieve your id here and do something with it.
console.log(ui.item.id);
}
});
The documentation mentions you have to pass in an array of objects with label and value properties. However, you may certainly pass in objects with more than these two properties and read them later.
Here is the relevant part I am referring to.
Array: An array can be used for local data. There are two supported
formats: An array of strings: [ "Choice1", "Choice2" ] An array of
objects with label and value properties: [ { label: "Choice1", value:
"value1" }, ... ] The label property is displayed in the suggestion
menu. The value will be inserted into the input element when a user
selects an item. If just one property is specified, it will be used
for both, e.g., if you provide only value properties, the value will
also be used as the label.
At last i did it Thanks alot friends, and a special thanks to Mr https://stackoverflow.com/users/87015/salman-a because of his code i was able to solve it properly. finally my code is looking like this as i am using groovy grails i hope this will help somebody there.. Thanks alot
html code looks like this in my gsp page
<input id="populate-dropdown" name="nameofClient" type="text">
<input id="wilhaveid" name="idofclient" type="text">
script Function is like this in my gsp page
<script>
$( "#populate-dropdown").on('input', function() {
$.ajax({
url:'autoCOmp',
data: {inputField: $("#populate-dropdown").val()},
success: function(resp){
$('#populate-dropdown').autocomplete({
source:resp,
select: function (event, ui) {
$("#populate-dropdown").val(ui.item.label);
$("#wilhaveid").val(ui.item.value);
return false;
}
})
}
});
});
</script>
And my controller code is like this
def autoCOmp(){
println(params)
def c = Client.createCriteria()
def results = c.list {
like("nameOfClient", params.inputField+"%")
}
def itemList = []
results.each{
itemList << [value:it.id,label:it.nameOfClient]
}
println(itemList)
render itemList as JSON
}
One more thing i have not set id field hidden because at first i was checking that i am getting the exact id , you can keep it hidden just put type=hidden instead of text for second input item in html
Thanks !
I've tried above code displaying (value or ID) in text-box insted of Label text. After that I've tried event.preventDefault() it's working perfectly...
var e = [{"label":"PHP","value":"1"},{"label":"Java","value":"2"}]
$(".jquery-autocomplete").autocomplete({
source: e,select: function( event, ui ) {
event.preventDefault();
$('.jquery-autocomplete').val(ui.item.label);
console.log(ui.item.label);
console.log(ui.item.value);
}
});
This can be done without the use of hidden field. You have to take benefit of the JQuerys ability to make custom attributes on run time.
('#selector').autocomplete({
source: url,
select: function (event, ui) {
$("#txtAllowSearch").val(ui.item.label); // display the selected text
$("#txtAllowSearch").attr('item_id',ui.item.value); // save selected id to hidden input
}
});
$('#button').click(function() {
alert($("#txtAllowSearch").attr('item_id')); // get the id from the hidden input
});
Auto Complete Text box binding using Jquery
## HTML Code For Text Box and For Handling UserID use Hidden value ##
<div class="ui-widget">
#Html.TextBox("userName")
#Html.Hidden("userId")
</div>
Below Library's is Required
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Jquery Script
$("#userName").autocomplete(
{
source: function (request,responce)
{
debugger
var Name = $("#userName").val();
$.ajax({
url: "/Dashboard/UserNames",
method: "POST",
contentType: "application/json",
data: JSON.stringify({
Name: Name
}),
dataType: 'json',
success: function (data) {
debugger
responce(data);
},
error: function (err) {
alert(err);
}
});
},
select: function (event, ui) {
$("#userName").val(ui.item.label); // display the selected text
$("#userId").val(ui.item.value); // save selected id to hidden input
return false;
}
})
Return data Should be below format
label = u.person_full_name,
value = u.user_id

Categories