I'm using vee-validate form validation and I have 3 address fields:
House Number
House Name
Flat Number
All 3 are optional because an address may only have 1, but I need the user to fill in at least one. So I can't make any of them required, and the documentation for cross field validation only handles putting specific validation on a single or multiple fields:
https://logaretm.github.io/vee-validate/advanced/cross-field-validation.html#targeting-other-fields
What is the best way of handling this? I'm no stranger to custom validation rules in my project, I just don't understand the approach here.
Thanks.
<div class="flex flex-wrap pb-2">
<FormTextInput
name="addressBuildingNo"
v-model="value.buildingNo"
type="text"
:label="$t('formFields.addressBuildingNo')"
placeholder="e.g 10"
:hint="$t('formHints.optional')"
/>
<FormTextInput
name="addressFlatNo"
v-model="value.flatNo"
type="text"
:label="$t('formFields.addressFlatNo')"
:hint="$t('formHints.optional')"
/>
<FormTextInput
name="addressBuildingName"
v-model="value.buildingName"
type="text"
:label="$t('formFields.addressBuildingName')"
:hint="$t('formHints.optional')"
/>
</div>
Wrap each one in a ValidationProvider and set the required rule on each to be that it's required if neither of the other two are filled out. So the first one would look like this:
<ValidationProvider :rules="{ 'required': (!value.buildingName && !value.flatNo)">
<FormTextInput
name="addressBuildingNo"
v-model="value.buildingNo"
type="text"
:label="$t('formFields.addressBuildingNo')"
placeholder="e.g 10"
:hint="$t('formHints.optional')"
/>
</ValidationProvider>
If you want more complicated validation, you can also write cross-field validators for each one that check things more specifically (following the docs you pointed out already). See a simplified example here: https://codesandbox.io/s/veevalidate-30-cross-field-optional-3dzxd
In the end I just made a hidden field with the value being a combination of all 3 fields.
<FormTextInput name="addressBuilding" type="hidden" v-model="compBuildingValue" rules="required" />
compBuildingValue() {
return `${this.value.buildingNo.trim()}${this.value.flatNo.trim()}${this.value.buildingName.trim()}`
}
Related
I have a list of similar looking DIVs without any Div ID, except one has a check box checked and others doesn't. What i need is to find the value from a child tag only if a radio button is selected.
Below is a simpler version of my code.
<div class = "XYZ">
<input type="radio" checked>
<input type="hidden" value="This is a great thing 1">
</div>
<div class = "XYZ">
<input type="radio">
<input type="hidden" value="This is a great thing 2">
</div>
Result needed is
This is a great thing 1
Unfortunately the source code cannot be changed.
Your xpath should look for a div that contains the checked input and to get the value for the one that has value attribute.
First selector returns the input, the second returns the value.
//div[.//input[#checked]]/input[#value]
//div[.//input[#checked]]/input/#value
As an alternative you can use the following sibling:
//input[#checked]/following-sibling::input
If you want to also use the class of the parent div:
//div[#class='XYZ']/input[#checked]/following-sibling::input
I'm currently trying to add validation to an angular 2 form, but for some reason I can't get my submit button to disable when the required fields are not filled in.
Here is the code of my form template:
<h1 md-dialog-title>{{title}}</h1>
<form #formCtrl="ngForm">
<md-dialog-content>
<md-input-container>
<input #name md-input placeholder="Name" value="" name="name" focused required>
</md-input-container>
<br />
<md-select #inputtype placeholder="Input type" name="inputtype">
<md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id">
{{inputtype.name}}
</md-option>
</md-select>
</md-dialog-content>
<md-dialog-actions>
<button type="submit" md-raised-button color="primary" [disabled]="!formCtrl.form.valid">Create</button>
</md-dialog-actions>
</form>
According to several examples, this should work, however the button is never disabled. I've also tried "!formCtrl.valid", also to no avail.
I've tried using non-material design input fields thinking maybe that would be the issue, but it still won't work.
I then tried copy/pasting the following simple example into my application, and even that won't work at all:
http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/
Any ideas as to what might prevent it from working correctly?
Assuming you are using a newer release than Angular 2 final:
You need to add ngModel, which binds the form value based on the name attribute’s value. In your case one is name="inputtype" the other is name="name". So you need to add ngModel to bind the values, and your form should work as you wish! :)
So the following should work (removed a bit of noise from code):
<form #formCtrl="ngForm" (ngSubmit)="save(formCtrl.value)"> //whatever your submit method is
<md-dialog-content>
<md-input-container>
<input md-input name="name" required ngModel>
</md-input-container>
<md-select name="inputtype" required ngModel>
<md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id">
{{inputtype.name}}
</md-option>
</md-select>
</md-dialog-content>
<md-dialog-actions>
<button type="submit" md-raised-button color="primary" [disabled]="!formCtrl.form.valid">Create</button>
</md-dialog-actions>
</form>
Don't remember when this was introduced, this should be found somewhere in the changelogs which can be useful to have a look at once in a while, since Angular is constantly tweaking things almost in every release. So following that will keep you updated with changes and syntax :)
I'm trying to validate that a radio button has been selected via server side in ColdFusion. The text input errors out if empty, however, the radio button group does not trigger an error if none are selected. I cannot seem to find any documentation on this.
<cfform name="mobile_device_request" id="form" action="">
Text Box:
<cfinput type="Text" name="subscriber" message="Please enter in a subscriber" required="yes" validateat="onserver">
Subscriber:
<cfinput type="Radio" name="service_provider" value="AT&T" required="yes" validateat="onserver"><span class="label">AT&T</span>
<cfinput type="Radio" name="service_provider" value="Sprint" required="yes" validateat="onserver"><span class="label">Sprint</span>
<cfinput type="Radio" name="service_provider" value="Verizon" required="yes" validateat="onserver"><span class="label">Verizon</span>
Explanation:
To answer your question, while I have never used that feature, I would say it is a bug.
According to the documentation onServer validation works by automatically appending hidden form fields with a special naming convention. The CF server then inspects all requests for certain patterns in form field names, such as ones ending in _required or _cfformrequired, and if found performs validation on the related field.
If you view the source of your cfform, notice CF has added several hidden fields:
<input type='hidden' name='subscriber_CFFORMREQUIRED' value='Please enter in a subscriber'>
<input type='hidden' name='service_provider_CFFORMREQUIRED' value='Error in service_provider text.'>
<input type='hidden' name='service_provider_CFFORMREQUIRED' value='Error in service_provider text.'>
<input type='hidden' name='service_provider_CFFORMREQUIRED' value='Error in service_provider text.'>
Those should trigger CF's server side validation for both fields. However, as you discovered it only works with the text field, not the radio buttons. Though curiously, it works just fine if you manually add a hidden field ending in _required:
<input type="hidden" name="service_provider_required"
value='You forgot to select a service_provider'>
Answer:
Again, I think the behavior you are seeing may be a bug. Frankly, one of many with cfform. Personally, I would recommend ditching cfform/cfinput. Use plain html inputs and write your own validation instead. Since it is a radio button, the field will only be defined if one of the buttons was checked. So you can either test for the existence of the field:
<cfif NOT structKeyExists(FORM, "service_provider")>
no service_provider selected. do something
</cfif>
... OR assign a default, and test for that value:
<!--- default to empty string --->
<cfparam name="FORM.service_provider" default="">
<cfif NOT len(FORM.service_provider)>
no service_provider selected. do something
</cfif>
I have this simple kendo-template script:
<!-- popup editor template -->
<script id="userEditor" type="text/x-kendo-template">
<div id="popServerErrorSummaryPlaceholder" style="display:none"></div>
<div class="control-row">
<label class="span2" for="FirstName">Vorname</label>
<input Id="FirstName" class="span4" data-bind="value:FirstName" maxlength="50" name="FirstName" required="true" type="text" />
<span class="k-invalid-msg" data-for="FirstName"></span>
</div>
<div class="control-row">
<label class="span2" for="LastName">Nachname</label>
<input Id="LastName" class="span4" data-bind="value:LastName" maxlength="50" name="LastName" required="true" type="text" />
<span class="k-invalid-msg" data-for="LastName"></span>
</div>
</script>
Which is used while editing a single row within the Kend-UI grid.
I have got right now two issues:
a) The documentation states that I can control the position for validation messages via a "span" element that has a class "k-invalid-msg".
The behaviour right now is that this span Element gets replaced with a div element and it is positioned below the label element. I would like to get the message next to the input.
b) The validation is triggered immediately when the pop up is displayed.The validation should be trigger either when leaving the input or clicking the "update" button.
Someone out there who can help me here?
Things I am not quite sure how to handle:
c) Some validations are performed at the server. I get them back to the browser via the DataSource error event (custom JSON which is basically a list of field name and associated error messages). I would like to display the error messages within the validation span. I can create custom validation rules as documented here.
How do I get the validator that is associated with the pop up editor window? Or is there foreach input a validator created?
Anyone did this before?
Thanks for any help!
Updates:
regarding to point a)
OnaBai pointed me to the right direction. Thanks for that.
I am having a problem with my client side validating. I am using DataAnnotations in my model. An this works when i am in the create form very nicely, but when i go to edit the information only some of the validation works.
i.e the Name box does have clientside val but the amount box does.
i have check the source name doesnot include the data-val="true". I don't understand why this would render this way because on the 'create' form it does and works fine?
<input class="text-box single-line" id="Name" name="Name" type="text" value="name" />
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
<input class="text-box single-line" data-val="true" data-val-number="The field Amount must be a number." data-val-required="The Amount field is required." id="Amount" name="Amount" type="text" value="120.00" />
<span class="field-validation-valid" data-valmsg-for="Amount" data-valmsg-replace="true"></span>
can somebody give me an idea how to make my 'edit' page validation work?
Thanks in advance
thank you for the help. but is have solved it!!
The problem was that because i was generated the edit view from the wrong class which meant that the DataAnnotations was not being read. what is have done now is to change the name of the class to that of my database then mark the class as partial and connected the DataAnnotaions by using this code below
[MetadataType(typeof(Budget_Validation))]
public partial class Budget
I put all the dataAnnotaions in the Budget_Validation class.
All now working fine!
Thanks