We Keep Coding

Jquery Validation dynamic inputs [duplicate]

I have a form on which I am using jquery.validate. I initially call validate with a set of rules and custom messages...
$("#formName").validate( {
rules: {
myExistingInput: {
required: true
}
},
messages: {
myExistingInput: {
required: "Enter something"
}
},
ignore: null, // include hidden fields (see below)
submitHandler: function(form) {
// do stuff
},
invalidHandler: function(event, validator) {
// do stuff (some of the fields may have been hidden by a collapsible panel
// if there is an error on one of those fields, expand the panel so the error
// becomes visible)
}
});
Later, I dynamically add fields to the form, and add rules for those fields too...
$("#formName").append(...);
$("#newInputName").rules("add", {
required: true,
messages: {
required: "Enter something else"
}
});
If I then submit the form, I get an error from within jquery.validate...
Exception occured when checking element newInputName, check the
'messages' method.TypeError: Unable to get property 'call' of
undefined or null reference
Debugging in the browser, I can see the error is being thrown from within the "check" function, and that the "method" variable is set to "messages".
If I remove the messages from the call to rules("add",...
$("#newInputName").rules("add", {
required: true
});
it works as expected, but obviously I now have no custom error messages.
I have seen many examples here on SO indicating that my syntax is correct. Any suggestions?
BTW: jQuery Validation Plugin - v1.11.0 - 2/4/2013

Your code seems to be working, without error, as you posted it.
DEMO with DOM ready: http://jsfiddle.net/UZTnE/
DEMO with PageInit & jQuery Mobile: http://jsfiddle.net/xJ3E2/
$(document).on("pageinit", function () {
$('#myform').validate({ // initialize the plugin
rules: {
field1: {
required: true
}
},
messages: {
field1: {
required: "Enter something"
}
}
});
$('[name*="field"]').each(function () {
$(this).rules('add', {
required: true,
messages: {
required: "Enter something else"
}
});
});
});
HTML:
<form id="myform">
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="submit" />
</form>
BTW:
this...
ignore: null, // include hidden fields
should be...
ignore: [], // include hidden fields
See: jQuery Validate - Enable validation for hidden fields

$(document).ready(function(){
$("#controlId").rules("add", {
required : true,
messages : { required : 'field is required.' }
});
});

as an answer to this old issue, I do like this to get the meassges inside the rules object.
After you have added the rules you can add messages like this:
var inputRules = $('input').rules();
inputRules.messages = {required: 'your message'};
Good luck!

if statement inside jQuery Validation plugin remote rule

I have two forms: one for adding a new user and the other for user data modification.
Forms are basically the same, only difference is that when doing modification username field should not be checked if exists in database.
In Js file I do field validations. One of those validations is checking if username already exists in database. In modification this should not be considered.
This is why I thought this, but it's not working:
I differentiate the two forms with div id.
(view snippet add_user form):
<div id="add_user">
<form action="{site_url()}admin/updateFrontUser" id="form_sample_2" class="form-horizontal" method="post">
(view snippet edit_user form):
<div id="edit_user">
<form action="{site_url()}admin/updateFrontUser" id="form_sample_2" class="form-horizontal" method="post">
and then:
(js file snippet)
var algo = $('.add_user', form2);
form2.validate({
errorElement: 'span', //default input error message container
errorClass: 'help-inline', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
rules: {
username: {
required: true,
minlength: 2,
maxlength: 15,
pattern: "[A-z](([\._\-][A-z0-9])|[A-z0-9])*[a-z0-9_]*",
remote: {
data: function(){
if (algo) {
url: '/admin/checkUsername';
type: 'POST';
};
}
}
},
The remote rule it's supposed to check if username exists. That function is already built in my admin.php. It worked previously, before I made the modifications I mentioned.
So to resume, How do I do just to use remote rule only for a new user (I mean, when using add form) ?

Please Try below rule
$().ready(function() {
$("#id_frm").validate({
rules: {
"id_question": {
required: true
},
"id_number": {
required: function(){ return $('input:radio[name=id_question]:checked').val() == 'Yes' },
minlength: 10,
minlength: 10
},
"contact_method": {
required: function(){ return $('input:radio[name=id_question]:checked').val() == 'No' }
}
},
messages: {
"id_question": {
required: "Please choose if you have an ID or not."
},
"id_number": {
required: "Please Enter ID."
},
"contact_method": {
required: "Please choose a contact method."
}
},
});
});

how to check for HTML tags and then add error in jQuery Validation

I am trying to validate my form using jQuery Validation plugin.
Here is the code
$(document).ready(function(){
var productsForm=$('#products-form');
productsForm.validate({
//debug:true,
invalidHandler: function(event, validator) {
// 'this' refers to the form
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted'
: 'You missed ' + errors + ' fields. They have been highlighted';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
},
rules:{
productName: {
required: true,
minlength:2,
//here i tried to create a function
onfocusout: function(element){
var myValue=$(element).val();
if(myValue.match(/[<>$]/))
{
alert('Please enter the Name without any tags.');
$(element).valid=false;
}
}
},
productType: {
required: true,
minlength:2,
},
productBrand: {
required: true,
minlength:2,
},
description: {
required: true,
minlength:10,
maxlength:150,
},
updatedBy:{
required:true,
minlength:2,
}
},
messages:{
productName:{
required: "Please enter the productName",
minLength: "The name should be atleast 2 characters long",
},
productType: {
required: "Please enter the productType",
minlength:"The type should be atleast 2 characters long",
},
productBrand: {
required: "Please enter the productBrand",
minlength:"The Brand Name should be atleast 2 characters long",
},
description: {
required: "Please describe your product",
minlength: "The description should be atleast 10 characters long",
maxlength: "You can not enter more than 150 characters",
},
updatedBy:{
required: "PLease Your name",
minlength: "The name should be atleast 2 characters long",
}
},
submitHandler: function(form){
if(productsForm.valid())
{
alert('tada');
return false;
}
else
{
alert('not valid');
return false;
}
}
});
});
Now I am trying to create a function which checks whether the input values contain HTML tags or not. If yes then show the error msg and do not submit the form. But I do not know how to do that. Can anyone help please?
I tried to create a function as onfocusout but do not know how to add error.

Quote Title:
"how to check for HTML tags and then add error in jQuery Validation"
If you're using the jQuery Validate plugin, you only need to specify a rule for a field and the corresponding error message is toggled automatically. There are built-in methods for creating custom rules and built-in methods for over-riding any error text with your custom text. The plugin automatically blocks the form submission during any error including errors triggered from your custom rules.
Quote OP:
"Now I am trying to create a function which checks whether the input
values contain html tags or not. If yes then show the error msg and
do not submit the form."
Your second sentence merely describes what every single validation rule does. Checks the input data and blocks submission on failure of this test. Your first sentence is what you want your rule to do... make sure the input contains no tags.
Quote OP:
"I tried to create a function as onfocusout but do not know how to add error."
Your code attempt indicates that you're making this way way more complicated than it needs to be. You do not need to tinker with any single callback function of the plugin just to create one new rule... at that point you might as well write your own validation plugin from scratch.
To achieve what you want, you simply need to use the addMethod method to write your own custom jQuery Validation rule. In this case, you'll need a regex that will exclude HTML tags... perhaps by only allowing letters and numbers. (Tweak the regex or replace the function with anything you see fit).
Refer to this really basic example:
jQuery.validator.addMethod("noHTML", function(value, element) {
// return true - means the field passed validation
// return false - means the field failed validation and it triggers the error
return this.optional(element) || /^([a-z0-9]+)$/.test(value);
}, "No HTML tags are allowed!");
$('#myform').validate({
rules: {
field1: {
required: true,
noHTML: true
}
}
});
DEMO: http://jsfiddle.net/mM2JF/
However, the additional-methods.js file already includes various rules that would automatically exclude any HTML...
letterswithbasicpunc => "Letters or punctuation only please"
alphanumeric => "Letters, numbers, and underscores only please"
lettersonly => "Letters only please"
$('#myform').validate({
rules: {
field1: {
required: true,
alphanumeric: true // <- will also not allow HTML
}
}
});
DEMO 2: http://jsfiddle.net/mM2JF/1/

Try this Code to Validate the HTML tags
jQuery.validator.addMethod("noHTMLtags", function(value, element){
if(this.optional(element) || /<\/?[^>]+(>|$)/g.test(value)){
return false;
} else {
return true;
}
}, "HTML tags are Not allowed.");
$('#form').validate({
rules: {
message: {
required: true , noHTMLtags: true
}
}});
I Hope this is also a good example.

Here is the exmple of what i hve done
$.validator.addMethod("CHECKDOB", function(value, element) {
return this.optional(element) || check_blank_dob(element);
}, "Please Enter Birth Date");
//See checkdob function is added to validator
Now
In rules
rules:{
<%=txtfirstname.UniqueID %>: {required: true}, <%=txtlastname.UniqueID %>: {required: true},
<%=txtdateofbirth.UniqueID %>: { required: true,
CHECKDOB:"Please Enter Birth Date",//see here i have called that function
date:true
},
now messages
messages: {
<%=txtfirstname.UniqueID %>:{required: "Please Enter First Name"},
<%=txtlastname.UniqueID %>:{required: "Please Enter Last Name"},
<%=txtdateofbirth.UniqueID %>:{
required: "Please Enter Birth Date",
CHECKDOB:"Please Enter Birth Date",
date:"Invalid Date! Please try again"
},
Here is your function
function check_blank_dob()
{
var birth=document.getElementById("<%=txtdateofbirth.ClientID%>").value
if(birth=="__/__/____")
{
return false;
}
return true;
}
See this function i have called at checkdob function when adding method to validator
This is just the example how to add you have to implement your method i hope this will help you regards....:)

I use regular expression for preventing HTML tags in my textarea
$.validator.addMethod(
"no_html",
function(value, element) {
if(/<(.|\n)*?>/g.test( value )){
return false;
}else{
return true;
}
},
"HTML tag is not allow."
);
$('#myform').validate({
rules: {
field1: {
required: true,
no_html: true
}
}
});

How to make a separate jQuery Validation messagebox note appear compared to an appended one next to the field: at the same time

I want a asterisk to appear next to the field, and then a specific message to appear at the bottom of my form at the same time upon validation.
Currently, I have these two versions:
1) works for the asterisk appearing after the field title.
2) works for making "please fill in the last name".
However, how can I get these both to work at the same time?
Currently only the one on top of the other will work if I have them both in my file at the same time.
1) APPENDed NEXT TO FIELD LABEL VERSION
$(document).ready(function() {
// validate signup form on keyup and submit
$("#newform").validate({
errorPlacement: function(error, element) {
error.appendTo('#title-' + element.attr('id'));
},
rules: {
lastname: {
required: true,
minlength: 2
}
},
messages: {
lastname: {
required: "*",
minlength: "*"
}
}
});
});
</script>
2) MESSAGE BOX VERSION
$(document).ready(function() {
// validate signup form on keyup and submit
$("#newform").validate({
errorLabelContainer: "#messageBox",
wrapper: "li",
submitHandler: function() { alert("Submitted!")
},
rules: {
lastname: {
required: true,
minlength: 2
}
},
messages: {
lastname: {
required: "please fill in last name",
minlength: "please fix the last name"
}
}
});
});
</script>
Thanks

The answer was that there can only be one validate on the page that will be recognized.
jQuery's Validate plugin has the highlight option that can replace the asterisk method I was trying to implement.
Meanwhile, errorLabelContainer can get the messages in space down by the bottom of the form.
Both of those options can go into one Validate() without interfering with each other.

jQuery Validation plugin with CKEditor

I know this question has been asked before and I have read all the previous questions and I still can't get the jQuery validator to properly validate CKEditor fields.
My form is below:
<form id="faq-form">
<p>
<label>Title:</label>
<input type="text" id="faq-title" name="faq-title" class="faq-title" />
</p>
<p>
<label for="question">Question:</label>
<textarea name="question" id="question"></textarea>
</p>
<p>
<label for="answer">Answer:</label>
<textarea name="answer" id="answer"></textarea>
</p>
<p>
<input id="submit-faq" name="submit-faq" type="submit" value="Submit" />
</p>
</form>
Both textareas are converted to CKEditor fields using:
<script>
CKEDITOR.replace('question', { toolbar : 'forum' });
CKEDITOR.replace('answer', { toolbar : 'forum' });
</script>
When I try to validate, only the title field gets validated. I am not sure what I am doing wrong. Here is my javascript code for validating (the following sits in a jQuery document ready function).
$('#faq-form').submit(function() {
// Update textareas with ckeditor content
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].updateElement();
$.trim($('#' + i).val());
}
// Validate the form
if ( ! $('#faq-form').validate({
rules: {
'faq-title': {
required: true,
minlength: 5
},
answer: {
required: true,
minlength: 20
},
question: {
required: true,
minlength: 20
}
}
}).form()) {
console.log('Form errors');
return false;
}
Once the validation is complete, I will use a $.post method instead of a normal form get or post so I can update my page without reloading. The $.post comes after the validation method but I didn't think it was necessary to show.

I was finally able to get it working. CKEditor hides the textareas when it runs and the jQuery validator ignores hidden elements. In the validate function, this can be changed. So my new code is below:
if ( ! $('#faq-form').validate({
ignore: "input:hidden:not(input:hidden.required)",
rules: {
'faq-title': {
required: true,
minlength: 5
},
answer: {
required: true,
minlength: 20
},
question: {
required: true,
minlength: 20
}
},
messages: {
'faq-title': {
required: "The title field is required"
},
answer: {
required: "The answer field is required"
},
question: {
required: "The question field is required."
}
},
errorElement: "span",
errorPlacement: function (error, element) {
error.appendTo(element.prev());
}
}).form()) {
console.log('Form errors');
return false;
}
I also added messages and modified the element and location of the errors when they are displayed. I figured that might be helpful to anyone else who stumbles across this.

Ok lets cut it down, I have spent hours to get the error message of CKEditor in the right place, because every time it showing up on top of the CKEditor or just after the label which is not look nice.
As CKEditor hides the textarea and put its span tag right after the textarea. Please use browser tool to inspect the dom elements, then you can see the textarea is hidden.
I just adjusted the code to get the error message label/span just under the CKEditor.
$('#messageForm').validate(
{
ignore: 'input:hidden:not(input:hidden.required)',
rules: {
msgTitle: {
minlength: 2,
required: true
},
msgText: {
minlength: 2,
required: true
}
},
errorElement: "span", // can be 'label'
errorPlacement: function (error, element) {
if ($(element).attr('id') == 'msgText') {
$('#cke_msgText').after(error);
} else {
element.after(error);
}
},
highlight: function (element) {
$(element).closest('.form-group').removeClass('text-success').addClass('error');
},
success: function (element) {
element
.closest('.form-group').removeClass('error').addClass('text-success');
}
});
Here, 'msgText' is the id of the textarea which is hidden, and cke_msgText id of the ckeditor, you can find the id by inspecting the dom element, perhaps ckeditor takes the id attribute of textarea and prefix 'cke_' with it.

My guess is that CKEditor doesn't play nicely with validation, at least by default. You'd need to remove the editors before validation (CKEditor works by hiding the thing being edited and then inserting an iframe and sticking the editable content in there; when you remove the editor it shuts down the iframe and copies over the content -- at least that's from memory). My guess is that if you inspect the DOM you'll see that the content of the textareas isn't changing.
You may find NicEdit more useful in this context -- see this thread:
https://stackoverflow.com/questions/3914510/wysiwyg-editor-without-iframe

Your code:
$('#faq-form').submit(function() {
// Update textareas with ckeditor content
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].updateElement();
$.trim($('#' + i).val());
}
if ( ! $('#faq-form').validate({
rules: {
'faq-title': {
required: true,
minlength: 5
},
answer: {
required: true,
minlength: 20
},
question: {
required: true,
minlength: 20
}
}
}).form()) {
console.log('Form errors');
return false;
}
....
You should not use .validate() inside a conditional. That's what the .valid() method is for. .validate() is only used for initializing the plugin once on DOM ready with your rules & options. Once initialized, then .valid() can be used inside conditionals to trigger a test and return a boolean.
Also, you should not have .validate() inside of submit handler. The plugin has it's own submitHandler callback function.
Your code should be changed into something like:
$(document).ready(function() {
$('#faq-form').validate({ // initialize the plugin
// rules & options,
rules: {
'faq-title': {
required: true,
minlength: 5
},
answer: {
required: true,
minlength: 20
},
question: {
required: true,
minlength: 20
}
},
submitHandler: function (form) {
// Update textareas with ckeditor content
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].updateElement();
$.trim($('#' + i).val());
}
}
})
if ( ! $('#faq-form').valid() ) { // test the form for validity
console.log('Form errors');
return false;
}
});

Best solution I found so far, simple and elegant:
$('#form1').validate({
ignore: [],
rules: {
corpo : {
required: function()
{
CKEDITOR.instances.corpo.updateElement();
}
}
}
})
Font: http://devlog.waltercruz.com/usando-ckeditor-e-jquery-validate-juntos

<form>
<textarea class="ckeditor" id="noticeMessage" name="message"></textarea>
</form>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<form>
<textarea class="ckeditor" id="noticeMessage" name="message"></textarea>
</form>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$("form").submit( function() {
var messageLength = CKEDITOR.instances['noticeMessage'].getData().replace(/<[^>]*>/gi, '').length;
if( !messageLength ) {
alert( 'Please enter a message' );
}
}
</script>
see for full reference
----------------------
http://christierney.com/2012/12/14/ckeditor-4-required-field-validation/