I have requirement to validate the URL based on the regular expression.
The question is, Is it possible to have url like http://www.google.12.com?
I have used the jquery plugin and it validates the above URL but in my application,
this is considered to be invalid one.
Is there a way i can apply additional validation.
Thanks.
You say you used the jQuery Validate plugin.
Here is the default URL rule included in this plugin:
function (value, element) {
// contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*#)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)|\/|\?)*)?$/i.test(value);
}
You can modify it to suit your needs and then use it as a custom rule using the built-in addMethod() method:
jQuery.validator.addMethod("custom_rule", function(value, element) {
return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*#)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)|\/|\?)*)?$/i.test(value);
}, "your message");
The arguments to the callback are:
the current value of the validated element
the element to be validated
Related
I would like to add a required field to a Kendo form.
This works with:
validation: { required: true },
If I now want to set required myself in a function, this no longer works.
validation: {
required: function(){
return true;
}
},
I have created an example: https://dojo.telerik.com/epEzewIt/5
If no entry is made in the "MultiSelect" field, the required variant as a function is no longer displayed: "MultiSelect is required" when it is empty.
How can I store required with a function?
If you want to execute some code one time you can use an anonymous function like:
validation: {
required: (function(){
return true; // run your rules here
})()
But, as documentation suggests, those (required, max/min, pattern, etc.) are field attributes that map to HTML rules. So you can't pass a function.
Why not use the kendoValidator on your submit action. This can be used to validate all the fields and set custom messages.
Here are more details on how to use Kendo Validator to create custom validations:
https://docs.telerik.com/kendo-ui/controls/editors/validator/rules
There are a lot of examples there.
if you want to achieve this and to have a event handler, you can use the following code:
validation: {
validated: function (input) {
//here you can place your code
//you need to return true of false
//e.g
if(true){ return true; }
return false;
}
}
I had the same use case, as I was building it dynamically.
As you can see I was able to validate it:
Using Foundation 6 Abide, I've created a custom validator that needs to check a username field against a pattern AND also have it reach out to the server to see if the username is already registered. When the custom validator is executed, it first tests the username against a regex pattern - if that succeeds, it then executes an ajax call to the server to see if the username exists. Since javascript doesn't wait, the custom validator function returns "true" indicating everything is OK. When the ajax call completes, if the username was found, it calls the "addErrorClasses" on the field. This works perfectly, however I'm concerned that since the validator previously returned "true" since it didn't want to wait on the ajax, that now there's no way to return "false" and the form will think it is in a valid state.
QUESTION: Does calling the addErrorClasses function mark the field as invalid, which would then make the form in an invalid state?
Foundation.Abide.defaults.validators.validate_username =
function($el,required,parent) {
// parameter 1 is jQuery selector
if (!required) return true;
let val = $el.val();
// Step 1 - check that it meets the pattern
if (!val.length)
return true;
let valid = new RegExp(username_pattern).test(val);
if (!valid)
return false;
// Step 2 - check that the username is available
$.ajax({
url: "http://localhost:3000/users/"+val,
}).done(function(data) {
$('#demo-form').foundation('addErrorClasses',$el);
console.log(data);
}).fail(function() {
// do nothing for now
});
return true;
};
Yes by calling the addErrorClasses will mark that control as 'invalid' but it depends where and how you call the method.
Since you are executing the ajax(i.e. asynchronous) it returns true by default. By that time your control will be 'valid' and when the ajax receives the response from the 'url' it sets 'invalid' based on your code.
When you try to submit the form the foundation framework resets all the control i.e. it removes all the 'data-invalid' attribute and then executes all the default and custom validators. Still your method return true. It doesn't wait for the response from your ajax.
The form will be submitted even if you have errors in your control.
In Semantic UI, I already know that you can validate forms, but there are only certain rules you can validate. In my signup form (in my application), I want to check if a user with a certain email already exists in the server. If the email exists, the user cannot signup with that certain email. How would I achieve this?
You can add custom validation rules to your form.
$.fn.form.settings.rules.myCustomRule = function(param) {
// Your validation condition goes here
return (param <= 10 )? true : false;
}
To pass parameters to a rule, use bracket notation in your settings object.
rules: [
{
type : 'myCustomRule[param]',
prompt : 'Custom Error'
}
]
Here is the doc Adding custom validation rule in semantic
I'm working in an ASP.NET MVC4 application, and as such, all array data sent to the server over ajax must be sent using the traditional option. (no [] for POST variables).
The problem is, I also have a filter set-up which requires an AntiforgeryToken to be sent with each ajax POST.
I have fixed this using an ajaxPrefilter like this:
$.ajaxPrefilter(function (options, originalOptions) {
if (options.type.toUpperCase() == "POST") {
options.data = $.param($.extend(originalOptions.data, { __RequestVerificationToken: "antiForgeryToken" }));
}
});
This works great, and adds the __RequestVerificationToken to all POSTs.
However, it also causes my data not to be parametrized according to the traditional flag.
Does anybody know how I can modify my prefilter to account for this?
Example can be found here:
http://jsbin.com/IxoKIKA/2/edit
You forgot to pass the traditional argument to $.param(). You should write:
options.data = $.param($.extend(originalOptions.data, {
__RequestVerificationToken: "antiForgeryToken"
}), true);
I have a registration form with about 30 fields (yes.. I know.. insanity). I need some of these fields to be required by certain types of people. What I'd like to do is just use a query string like example.com/user/register/?type=notrequired. If type = notrequired then I'd like to make to make the fields not required. Is this possible? I tried using the jQuery Validate plugin but its not working.. I'm thinking the built in Drupal validation is conflicting with it :(
The required flag is set server side so I doubt you'll be able to affect it using javascript. You'll have to hook into the form and make the changes in PHP, something like this in a custom module:
function mymodule_form_user_register_form_alter(&$form, &$form_state, $form_id) {
if (isset($_GET['element_name']) && $_GET['element_name'] == 'notrequired') {
$form['element_name']['#required'] = FALSE;
}
}
Hope that helps