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:
Related
When the user picks a value from a select dropdown, the onChange calls a function in the parent container. There I need to check which fields are filled.
But it appears that the value hasn't been set in the form yet.
I have tried to use the selectors valid and getFormvalues, but they are not updated with the latest form value change.
See this codesandbox.
If I print getFormvalues in the render of the form component, it is updated, but I can't handle the form there.
So how can I handle the form after the user picks a value, where the form is updated?
You are already receiving values in the SimpleFormContainer due to connect. You don't need the callback from SimpleFormContainer to SimpleForm. You can use the componentWillReceiveProps in the SimpleFormContainer to check the values update and do whatever you want.
The final code might look like:-
class SimpleFormContainer extends React.Component {
componentWillReceiveProps(nextValues) {
if (this.props.formValues !== nextValues.formValues){
console.log(nextValues.formValues)
}
}
render() {
return (
<SimpleForm onSubmit={showResults}/>
)
}
}
SimpleFormContainer = connect(
state => ({
formValues: getFormValues('simple')(state)
}),
{ getFormValues }
)(SimpleFormContainer);
Working example
I'm creating a form with Angular2 and I created two custom validators for email address field.
The first validator checks for email validity, the second (async) validator checks if email address already exists on database.
In addition I would like to add a third validator for another verification.
Here is my code:
'email': ['', [validateEmail(), thirdValidator()], asyncValidator]
The behaviour that I want is the following:
Only when the first validator validates the control, the second validator should start. And only when the second validator terminates then the third validator can start its validation.
How to reach this?
Validators.compose method should do the job, example:
let formControls = {
'oldPassword': new FormControl({ value: ''}),
'newPassword': new FormControl({ value: ''}, Validators.compose([customValidator1, customValidator2]), customAsyncValidator)
};
Composed validators work simultaneously, meaning we can have multiple errors on the control at the same time (each validator attaches its own error if validation failed). If we need to have only one error on the control at a time, we can 'chain' validators by checking the status of the previous validation before performing next one. Something like this:
let customValidator2 = (ctrl: FormControl): any => {
if(ctrl.hasError('customValidationError1')) {
// there is the error attached by customValidator1,
// skip executing customValidator2 (nullify its error)
return null;
}
let isInvalid = true; // some condition...
return isInvalid ? { customValidationError2: true } : null;
}
This way we can accomplish 'ordering' the validators by their priority for example.
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
I want to be able to kick off some validation functions based upon what controller a view is called from... I will set a variable in ViewState or something and that will help me to know what controller this view was called from.
In other words, I want the validation to be required if a certain variable is set... Here is how I use to do in MVC2 when I just put Jquery into my code...
HospitalFinNumber: {
required: function (element) {
debugger;
return '#isFlagSet' != 'True';
},
minlength: 6,
remote: function () {
//debugger;
return {
url: '#Url.Action("ValidateHosFin", "EditEncounter")',
data: { hospitalFin: $('#HospitalFinNumber').val(), encflag: '#encflag' }
};
}
}
You see what I am doing there. This validation would only be required if a certain variable is set... In this case, the variable isFlagSet... I would then set min Length and call a remote function to ensure that the value is unique.
I don't want to do this in all cases.
From all I have read so far, there is no clear way to accomplish this using unobrtusive ajax? Am I wrong, is there a way you can do this? If not, how can I just place regular old jquery validation into my code?
ASP.NET MVC 3 uses jquery unobtrusive validation to perform client side validation. So you could either write a custom RequiredIf validation attribute or use the one provided in Mvc Foolproof Validation and then:
public class MyViewModel
{
[RequiredIf("IsFlagSet", true)]
[Remote("ValidateHosFin", "EditEncounter")]
[MinLength(6)]
public string HospitalFinNumber { get; set; }
public bool IsFlagSet { get; set; }
public string EncFlag { get; set; }
}
Then all that's left is to include the jquery.validate.js and jquery.validate.unobtrusive.js scripts or use the corresponding bundle in ASP.NET MVC 4 that includes them.
Another solution suggested by Andy West on his blog is to Conditionally Remove Fields from the Model State in the Controller:
When the form is posted, remove the fields from the model state so they’re not validated:
if (Request.IsAuthenticated)
{
ModelState.Remove("CommenterName");
ModelState.Remove("Email");
}
That worked for me.
We have a possibility that data loaded from a GET operation could be invalid for posting, and would like to be able to display the validation messages when the data is first loaded. The validation all takes place on server side using ValidationAttributes.
How can I force the validation summary to be displayed when the data is first loaded? I am guessing that I need to force errors into ModelState somehow, but I first need to get them out of the model class.
I ended up adding a validation method for the model class which adds errors to the ModelState. Then I created and added a custom ModelValidator and AssociatedValidatorProvider
for calling it during the normal validation that takes place during form binding. That way the controller actions that don't bind to the Model class directly can still have a call to the model's .Validate(ModelState) method to fake a validation. This approach works well for server-side-only validation.
UserInfo Model class:
private IEnumerable<RuleViolation> GetRuleViolations()
{
List<RuleViolation> violationList = new List<RuleViolation>();
if (String.IsNullOrWhiteSpace(FirstName))
violationList.Add(new RuleViolation("First Name is required.", FirstName"));
return violationList;
}
public void Validate(System.Web.Mvc.ModelStateDictionary ModelState)
{
foreach (RuleViolation violation in GetRuleViolations())
{
ModelState.AddModelError(violation.PropertyName, violation.ErrorMessage);
}
}
This is how it can be used directly from a controller action. In this action the Model class object is returned as part of the UserSearch model.
public ActionResult Search(UserSearch model)
{
if (this.ModelState.IsValid)
{
model.Search();
if (model.UserInfo != null )
{
model.UserInfo.Validate(ModelState);
}
}...
That is all I had to do for the particular use case I was working on. But I went ahead and completed the work to do "normal" validation on a postback: created a simple ModelValidator, with the Validate override looking like this. If you followed the above pattern in all of your Model classes you could probably reusue this for them, too.
public override IEnumerable<ModelValidationResult> Validate(object container)
{
var results = new List<ModelValidationResult>();
if (Metadata.Model != null)
{
UserInfoViewModel uinfo = Metadata.Model as UserInfoViewModel;
foreach (var violation in uinfo.GetRuleViolations())
{
results.Add(new ModelValidationResult
{
MemberName = violation.PropertyName,
Message = violation.ErrorMessage
});
}
}
return results;
}
Finally, extend AssociatedValidationProvider to return this ModelValidator and add it to the ModelValidationProviders collection in Application_Start. There is a writeup of this at http://dotnetslackers.com/articles/aspnet/Customizing-ASP-NET-MVC-2-Metadata-and-Validation.aspx#s2-validation
I don't know if understand what you need, but here is it...
run validation to display the validation summary when the form is loaded, using jquery
$(document).ready(function() {
$('#FormId').valid();
});