Validating generated number input with Bootstrap FormValidation - javascript

I've been struggling to get this field validation to work. I'm using the JS validation for bootstrap from http://formvalidation.io/ and I've examined http://formvalidation.io/settings/ but nothing I've tried is working.
The field needs to validate a number input on a dynamically generated field using Razer C#, and the form is built to submit multiple models, therefore my name attribute is values[#i].Rating for each element that is generated, where i is an integer that is incremented in a loop.
The validation must make sure the client enters a number between 1 and 4 (inclusive), and if it is not a number between 1 and 4, it must show an error message such as "Please enter a number between 1 and 4". Here is my code, I first tried it with HTML attributes:
<input style="text-align: center" type="number" data-fv-between-min="1" data-fv-between-max="4" data-fv-between-inclusive="true" data-fv-between-message="Please enter a rating between 1 and 4" name="values[#i].Rating" class="form-control" />
but this didn't work, so I tried the javascript route with:
$(document).ready(function () {
$('#newTSRForm').formValidation({
framework: 'bootstrap',
fields: {
selector: '[type="number"]',
input: {
validators: {
between: {
min: 1,
max: 4,
message: 'Please enter a value between 1 and 4'
}
}
}
}
})
});
but my syntax is probably wrong or my thinking is incorrect. I also tried
$(document).ready(function () {
$('#newTSRForm').formValidation({
framework: 'bootstrap',
fields: {
'values[]': {
validators: {
between: {
min: 1,
max: 4,
message: 'Please enter a value between 1 and 4'
}
}
}
}
})
});
But this doesn't work either. I have made sure my set up is correct so the problem is simply syntax or plausability. Can anybody advise?

¿ Did you look at http://formvalidation.io/examples/validating-field-special-name/ ?
I think you have to add every single field with the AddField method of the Plugin.. Adding dynamic field

Related

Ajv keywords and custom error messages

I have written a schema but it does not seem to be validating as I was expecting. I'm assuming there is something wrong with my schema syntax but cannot figure it out. I expect not to see error messages for title or target until fundraiser is complete since they are only required if fundraiser is completed. I've tried many combinations but none of them are working as expected, these two are the closest I've come to what I need.
Schema attempt one: shows 4 error messages, 3 required errors and 1 error saying data should match "then" schema.
const schema = {
required: ['fundraiser'],
if: {
properties: {
fundraiser: { type: 'string' },
},
},
then: {
required: ['title', 'target'],
},
errorMessage: {
required: {
fundraiser: 'Please select an option',
title: 'Please enter a title',
target: 'Please enter a target',
},
},
};
Schema attempt two: shows 2 error messages, 1 required error and 1 error saying data should match "then" schema which is correct but then when I complete fundraiser valid becomes true which is when I expect to then see required errors for title and target. Also no errors have my defined custom error messages.
const scema = {
if: {
properties: { fundraiser: { minLength: 2 } },
then: { required: ['title', 'target'] },
},
then: { required: ['fundraiser'] },
errorMessage: {
required: {
fundraiser: 'Please select an option',
title: 'Please enter a title',
target: 'Please enter a target',
},
},
};
I am pretty sure that I am doing something wrong with my schema but it is not clear from the documentation how to use if/then in combination with custom error messages using ajv-errors. Any help would be greatly appreciated! Thanks!
The problem with the first schema is that subschema inside “if” is valid, unless fundraiser property is present and not a string. It would probably work as you expect if you add type: 'object' to the root schema and move required inside “if” subschema.
The problem with the second subschema is that the first “then” that has no “if” in the same schema object is ignored (unless you are using ajv-keywords that implemented if/then/else somewhat differently from how it is defined in draft-07 of JSON Schema spec) and the subschema inside “if is valid even if fundraiser property is absent and the second “then” can only pass if fundraiser is present.

JQuery validation only works on the first generated input

I'm trying to resolve this issue but no matter what I try (based on several suggestions solutions found here as well), I can never make it work.
I would like the Jquery validation plugin to validate automatically all the generated fields from a form. My problem is that it will only work on the first generated field; the validation of the subsequent ones will just be a duplicate of the first.
Here's the pertinent html code:
<form class="someFormClass" method="post">
<span>
<input class="calendarName" name="description" value="<?= value_from_php ?>">
<input class="calendarName" name="description" value="<?= value_from_php ?>">
</span>
</form>
And here's the jQuery validation code:
$(function () {
$('form').each(function () {
$(this).validate({
errorElement: "div",
rules: {
description: {
required: true,
remote: {
url: "calendar/calendar_available/",
type: "post",
data: {
name: function () {
return $(".calendarName").val();
}
}
}
}
},
messages: {
description: {
required: "Description field can't be blank !",
remote: "This calendar already exists."
}
}
});
});
So, as stated, the plug-in behaves properly for the first field. But if I check the values posted in Chrome's Network, the "name" key created in the jQuery validation will always send the value of the first input.
I tried many things (trying to implement on more level of ".each" method in the validation, trying to generate dynamically a specific id for each field to point on (instead of a class), trying to modify the plugin code as suggested here (How to validate array of inputs using validate plugin jquery), but it didn't work.
I think there's something I don't grasp about the logic here.
UPDATE :
So, one of the reasons of my problem is that jQuery validation absolutely requires input with different names. See : Jquery Validation with multiple textboxes with same name and corresponding checkboxes with same name
So, I made a script to generate a different name for each input with the intention to dynamically create validation rules based on those names, following this suggestion : https://stackoverflow.com/a/2700420/3504492
My validation script now look like this :
$(function() {
var rules = new Object();
var messages = new Object();
$('input[name*=description_]:text').each(function() {
var currentName = $("input[name="+this.name+"]").val();
rules[this.name] = {
description: {
required: true,
remote: {
url: "calendar/calendar_available/",
type: "post",
data: currentName
}
}
},
color: {required: true}
};
messages[this.name] = {
description: {
required: "Description field can't be blank !",
remote: "This calendar already exists."
},
color: {required: "Color field can't be blank !"}
};
});
$('form').each(function () {
$(this).validate({
errorElement: "div",
rules: rules,
messages: messages
});
}) });
This almost works. Almost because if I limit the rules et messages to the required keys, it will display the validation each field (if I add the specific name to the message string, it will display on the proper field). But with a most complex rule like mine (with a remote key containing various keys for instance), I get a " Cannot read property 'call' of undefined. Exception occurred when checking element , check the 'description' method." error in the Console.
My guess is that the "description" declaration in the "rules" definition should be dynamic too (the current "name" field being visited).
Any suggestion?

validate.js different functions on invalid

I'm using validation.js plugin and in the case I want it I was trying to make some changes to it but after a lot of thinking and testing and searching I got nothing , at least nothing I wanted...
I have this code:
$("#form").validate({
rules:
{
phone:
{
required: true,
number: true,
minlength: 6
}
},
messages:
{
phone:
{
required: 'This field is required',
number: 'Invalid phone number',
minlength: 'Minimum length: 6'
}
}
});
every thing is okay but I want it to run some different functions in addition to showing massages , for example when the user type sth less than 6 char , show massage AND RUN Function ONE , if the user type sth except nums it shows massage and also RUN Function TWO
sth like this:
$("#form").validate({
rules:
{
phone:
{
required: true,
number: true,
minlength: 6
}
},
messages:
{
phone:
{
required: 'This field is required',
number: 'Invalid phone number' + function TWO,
minlength: 'Minimum length: 6' + function ONE
}
}
});
can anyone help me please?
You can use a callback function instead of a string as the value for a custom message. Just make sure to return the message from that function. That way you can do any operation before outputting the message. The callback function takes two arguments, first is the value being passed to the rule, and second is the element.
messages
...Each message can be a String or a Callback. The callback is called in the scope of the validator, with the rule's parameters as the first argument and the element as the second, and must return a String to display as the message.
messages:
{
phone:
{
required: 'This field is required',
number: function(rule, elem) {
doSomeStuff('run before number message');
return 'Invalid phone number';
},
minlength: function(rule, elem) {
doSomeStuff('run before minlength message');
return 'Minimum length: 6';
}
}
}
Check the -- JSFiddle Example -- here.

Custom error messages for Groups within the jQuery Validation plugin

I'm using the jQuery Validation plugin and i've started to group some of my fields together:
groups: {
fullName: "myFirstName myLastName"
},
I've also added the fields to the rules section so that they are validated:
rules: {
myFirstName: {
required: true
},
myLastName: {
required: true
}
},
This works great and produces an error of "This field is required" for the group.
My question lies with custom error messages. I have the following setup:
messages: {
fullName: "Please enter both your first name and your last name"
}
Unfortunately the custom error doesn't show, only the generic one.
Does anyone have any ideas?
You have to use errorPlacement for this, and the message should be the same on both, for example:
messages: {
myFirstName: { required: "Please enter both your first name and your last name" },
myLastName: { required: "Please enter both your first name and your last name" }
}
Then, assuming they have the same IDs here, your errorPlacement option would look like this:
errorPlacement: {
var n = element.attr("name");
if (n == "myFirstName" || n == "myLastName")
error.insertAfter("#myLastName");
else
error.insertAfter(element);
}
The group itself has no message, it's just telling the plugin that they share a message label.

jquery validation only digits

I am having the jquery.validate.js plugin and it is working fine for me.
My question is :
I am having a textbox and this textbox is mandatory and should only accept digits.
In the js, I can see that there is validation for the digits and the problem is that I do not know how to use it.
I only knew how to make the field required by putting in the textbox field <class="required">
So, how can I add one more validation criteria to accept only digits.
Thanx
to check it add
$("#myform").validate({
rules: {
amount: {
required: true,
digits: true
}
}
});
http://docs.jquery.com/Plugins/Validation/Methods/digits
$("#mobile_number").validate({
rules: {
mobile_number: {required: true,number:true}
},
messages: {
mobile_number: {required: "Please Enter Your Mobile Number",number:"Please enter numbers Only"}
}
});

Categories