I am running into this situation:
I want to apply multiple validations on a field which like example below:
<Field name="username" type="text"
component={renderField} label="Username"
validate={[ required, maxLength15 ]}
/>
But I want to make the 15 as a configure number instead.
For example, userNameValidatiorConfig = [required, {maxLength: 15}]
Any ideas on this?
The validate prop of Field contains usual javascript functions. Thus you could do something like
validate={(value) => maxLength(15)(value)}
That is if your validation functions look like
const maxLength = (max) => (value) => value && value.length > max ? "Bad input!" : undefined;
Related
in my html i can able to add more fields using jquery and the field am generating is check box array. i need to retrieve this in my controller.
so far i have tried
<input type="checkbox" value="1" name="washing[]" id="washing[]">
<input type="checkbox" value="1" name="dryclean[]" id="dryclean[]">
In controller
$clothtypeid = $request->input('clothtypeid');
$washing = $request->input('washing');
$pressing = $request->input('pressing');
for($i=0;$i<count($clothtypeid);$i++){
//in here how to test if the checkbox is ticked then value=1 else 0 ??
}
I expect if the checkbox is ticked then i have to make 1 else 0
Thanks in Advance
So I did a bit of digging and found this Tutorial which suggests;
Setting the input type to "checkbox" like you did there..
Keep the same name and include the '[]' at the end of the name attribute so that you have the following in your form;
<input type="checkbox" name="check_list[]" value="washing">
<input type="checkbox" name="check_list[]" value="dryclean">
Then in the controller you can get the value by doing the following;
if(!empty($request['check_list'])){
// Loop through array to get the checked values.
foreach($request['check_list'] as $item){
//do something here like;
if($item == 'washing'){ //make db operation or assign to a variable..}
else if($item == 'dryclean'){//make db operation}
}
}
This is a very basic example as you can see and I have to say that I haven't tested it yet but I believe it will work. Try it and give feedback.
EDIT: There is an answer here
In a SimpleForm of an Edit view I would like to set the minimum value of the group size based on the current number of members inside.
The entity is:
group = {members: 3, size: 10}
What I'm trying to achieve looks like:
export const UserCreate = (props) => (
<Edit {...props}>
<SimpleForm>
<DisabledInput label="Members number"
source="members" />
<NumberInput label="Group size"
source="size"
validation={{min: members, required: true}} />
</SimpleForm>
</Edit>
);
This is explained in the documentation, in the Per Field Validation: Function Validator part.
In a nutshell, you define a function which will take 2 parameters: the value to validate and values which contains all the form values
I have a FieldArray like this:
renderLanguages = fields => (
<div>
{fields.map(fieldName => <Field name={fieldName + '.iso'} component="input" type="text" />
</div>
)
<FieldArray name="languages" component={renderLanguages} />
And i like to validate it in a async way:
const asyncValidate = values => {
console.log(values);
}
export default reduxForm({
form: 'languagesForm',
asyncValidate,
asyncBlurFields: ['languages']
})(LanguagesForm)
My asyncValidate never gets called. I wonder if i have to specify the asyncBlur fields in an other way. Or if redux-form does not provide the async validation of field arrays.
To get Redux-form FormArray working with the asyncValidate, it requires to pass the field as languages[].<nameOfTheFieldOfChildComponet> but not languages only.
I think its good design too as generally, we don't validate asynchronously on change of any parameter but a specific parameter.
Here is the working example:- https://codesandbox.io/s/mq8zz58mrj
const asyncValidate = values => {
console.log(values);
}
export default reduxForm({
form: 'languagesForm',
asyncValidate,
asyncBlurFields: ['languages[].name']
})(LanguagesForm)
I create a variable list of input elements which are bound to a kendo MVVM.
I have a kendo validation running over all my input elements (this is standard functionality), checking if the input is empty.
The objects in my MVVM have an attribute IsMandatory, like this:
{ Name: "test", ID: 12, ... , IsMandatory: false }
The validation must not try to validate elements with an IsMandatory value of false. How can I achieve this?
I know I can bind attributes to MVVM values like this:
<input data-bind="attr: { name: Name }" />
Which results in an actual output like this for the object above:
<input name="test" />
However, the required attribute used for the standard required validation is value-less, like this.
<input name="test" required />
So basically I need to create elements with a required attribute if the IsMandatory attribute in my MVVM object is set to true, and without the required attribute if it is set to false.
{ Name: "test1", ID: 1, ... , IsMandatory: true }
{ Name: "test2", ID: 2, ... , IsMandatory: false }
{ Name: "test3", ID: 3, ... , IsMandatory: true }
<input name="test1" required />
<input name="test2" />
<input name="test3" required />
Is there an elegant solution to this problem? Other than putting an if-else around the creation of each element. Or is there a different solution of excluding/including elements in my validation?
One option I could imagine would be to create a custom required validation, checking if the IsMandatory attribute for the input is set to true and only then validate the element. However, I could not find any possibility to get my hands on the MVVM object of the current element.
...
validation: {
required: function (input) {
var observable = // Get the kendo observable from input here !!!!!
if (observable.IsMandatory) {
return input.val() != "";
}
return true;
}
},
...
This can be implemented as a custom binding:
kendo.data.binders.required = kendo.data.Binder.extend({
refresh: function() {
var required = this.bindings.required.get();
if (required) {
this.element.setAttribute("required", "required");
} else {
this.element.removeAttribute("required");
}
}
});
Here is a live demo: http://jsbin.com/atozib/1/edit
i got a template created for custom zip code field.
My template code is below:
#{
string model = Model ?? string.Empty;
string zipFirst = "";
string zipSecond = "";
if(!String.IsNullOrEmpty(model) && !String.IsNullOrWhiteSpace(model))
{
var values = model.Split('-');
if(values.Count() == 2)
{
zipFirst = values[0] ?? string.Empty;
zipSecond = values[1] ?? string.Empty;
}
}
var pName = ViewData.ModelMetadata.PropertyName;
var zipAreaId = "#" + pName + "zipcodearea";
}
<div id="#(pName)zipcodearea">
<input type="text" maxlength="5" id="zipcodefirst" name="#(pName)codefirst" value="#(zipFirst)" style="width:136px"/> -
<input type="text" maxlength="4" id="zipcodesecond" name="#(pName)codesecond" value="#(zipSecond)" style="width:120px"/>
#Html.HiddenFor(m => m, new { #class = "generatedZipField"})
</div>
<script type="text/javascript">
jQuery(function ($) {
$('#(zipAreaId) #zipcodefirst').autotab({ target: '#(pName)codesecond', format: 'numeric' });
$('#(zipAreaId) #zipcodesecond').autotab({ previous: '#(pName)codefirst', format: 'numeric' });
$('#(zipAreaId)').zipcode();
});
</script>
And i use it like this:
[UIHint("ZipCode")]
[Display(Name = "Zip Code")]
public string Zip { get; set; }
Like you see in my template i got two fields whats not included in the model.
It is #zipcodefirst and #zipcodesecond.
What i need to achieve is to have two separate fields for full us zip code.
When user fill both fields im using jquery widget for merging them into one string and inserting it into hidden field in template. after form submited value in hidden field getting sent into server.
Whats the problem?
I need to add mvc unobtrusive validation for them two fields whats not in the model #zipcodefirst and #zipcodesecond.
validation rules
zipcodefirst field must be filled in first
then zipcodefirst field is filled you can fill second field
second field must have 4 digits in it
first field must have five digits
cant fill second field while first one is empty or incorectly filled
Im strugling with validation part for quite a while now.... :(
How i could achieve that thru mvc3 unobtrusive validation tools?
any help will be highly apreciated guys.
Add unobrusive data data validation on the textbox by adding data-val="true" and use a regular expression for your zip code.
<input type="text" data-val="true" data-val-regex="Invalid zip code format" data-val-regex-pattern="YOUR REGEXP HERE" />
UPDATE
If you also want it to be required you can add the data-val-required attribute.
<input type="text" data-val="true" data-val-requred="Zip code is required" data-val-regex="Invalid zip code format" data-val-regex-pattern="YOUR REGEXP HERE" />
More information about validation in MVC 3:
http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html