Should I use validationGroup or or validator to validate no1 OR no2 is required?
I have to input areas. Form should be valid only if one of areas are filled.
no1 > 0 || no2 > 0
Please Check question repo.
Related
I would like to simplify some code of mine. It's quite simple honestly. I have 1 input field, and if a certain condition is fulfilled, it should have 1 more attribute. It should have the list attribute. The Problem I'm having is, that I don't know how to dynamically set an attribute.
The code looks like this currently:
<input th:if="${fieldIndex == 0 && !#arrays.contains(dropDownFields, y)}"
th:disabled="${#arrays.contains(disabledFields, y)}"
th:field="*{ZMatrixValues[__${dataIndex}__].tableValues[__${i}__][__${y}__]}"
class="table-input" type="text" onfocus="focused(this)">
<input th:if="${fieldIndex == 0 && #arrays.contains(dropDownFields, y)}"
list="list"
th:disabled="${#arrays.contains(disabledFields, y)}"
th:field="*{ZMatrixValues[__${dataIndex}__].tableValues[__${i}__][__${y}__]}"
class="table-input" type="text" onfocus="focused(this)">
And as you can see, the 2 input fields are the exact same, except when this condition is true: #arrays.contains(dropDownFields, y), then it should also add the attribute list="list". Is there any easier way than copying so much code?
Any help would be appreciated, thank you!
Instead of using th:if you can use th:attr and place the conditional logic in that attribute using the Thymeleaf "if-then-else" operator: (if) ? (then) : (else).
Here is a simplified version of your code showing this:
<input th:attr="list=${#arrays.contains(dropDownFields, y) ? 'some_value' : null}">
If the #arrays.contains condition is true, then the list attribute will be added to the <input> element; otherwise if the condition is false, and the null is returned, then no attribute will be added.
Instead of 'some_value' you can use whatever you want - including the th:field expression from your question.
All the other attributes in your question can be included in the tag, and will be unaffected, since they are not part of the (if) ? (then) : (else) logic.
In this scenario the input field is limited to 5 Characters for the user to enter, once the user enters the 5 characters I append programatically a kind of description for the input to it (USER-Description).
Since the actual input will be the users input i want that to be limited to 5 but I should be able to programatically add a string of any length. When I do this currently the input field stays Red as if the required flag is on.
I think below points may help
You can add a empty box and maxLength Validation on (focus). and on (blur) remove the validation and apeend extra text.
or
you can do via css Trick, make a input group box. (input + div). (search input-group bootstrap for more info).
Have input a validation of 5 charter in input box and on focus and blur play with your append logic.
point 1 code will look something like this
<input type="text"
(focus)="firstName.maxLength = 5"
(blur)="appendString()"
name="firstName" [(ngModel)]="model.firstName" #firstName="ngModel" required />
Currently I am working on a form builder,
the user can add input box with different name into the form.
Notice that the form will be stored as HTML code, so the only concern is the input box name storage and submit form value
Now I have draft a table like this
form
-----
id
inputs
------
form_id
name
values
-------
input_id
value
One problem I can think of is the data type of value,
the above design works only if the value is text / textarea
How to handle if the input box is file upload / radio / select?
so are there are Any better design,
thanks a lot for helping.
you have to store element type also. according to the element type,find out which html element it is and render this
You will need an extra table for radio and select, since it has multiple rows for one <input> field.
Don't forget about optional things like id=, name=, style=, class=, etc.
I predict that your finished product will be as clumsy to use as typing the form elements by hand.
This is my first time asking something here so I tried to put as much information as possible to help in my predicament.
I have a question pertaining to an HTML form I'm building that uses some AngularJS which I'm learning more about as I go along.
The form itself uses some mathematics in it which I'm generating a dividend from 2 fields at a time while also factoring in a total number of people. The page itself will generate the dividend on the page itself to give the user a real-time look at their math, so there are already ng-models on most if not all fields. The catch is that the dividend itself for the fields cannot exceed 1 as I'm doing percentages from 0-100%.
Previously if the numerator was higher than the denominator, or the denominator was higher than the max amount of people I would have an explanation field that was previously be a non-required field toggle to required like so:
<textarea rows="4.5" cols="50" id="My_Fields_Notation__c" tabindex="11"
name="My_Fields_Notation__c" maxlength="255"
ng-required='fieldDen < fieldNum || fieldDen > numberOfPeople'
type="text"></textarea>
My question is if I was to remove the ng-required on this field and add a separate ng-invalid on the numerator and denominator each
(ng-invalid='fieldDen < fieldNum' on the numerator and ng-invalid='fieldDen > numberofPeople' on the denominator)
Would that cause the field to not submit if those parameters are met? (ex. if a user has Numerator: 100, Denominator: 50 and/or Number of people: 100, Denominator: 101 would the form not submit since the numbers don't meet those parameters I'm trying to set)
EDIT: If this helps to better explain my situation. I have several numerators and denominators for this form all with their own ng-model names.
The numerator cannot be higher than the denominator
The denominator cannot be higher than the number of people
If either or happens on any of the numerators and denominators, I want to block submission of the form
At the same time the form is in a drupal page and the only JS file I've been able to successfully call in was the angular file so far, so I think any additional script needs to be coded in the page itself if I need to create any controllers.
If your form submit's or doesn't submit depends on how you do the submission.
It will submit if you use:
<button ng-click='mySubmitFunction()'>Submit</button>
It will not submit if you use:
<button ng-click='formValid() && mySubmitFunction()'>Submit only if valid</button>
To check if your validation condition is met add a validation function:
$scope.formValid = {
return ($scope.fieldDen < $scope.numberofPeople) && ($scope.fieldDen < $scope.fieldNum)
}
If you only want to validate a certain input you can also write a validation directive for this. This let's you show i.e. custom error messages if a certain condition is not met like the format, example plunkr taken from the docs: http://plnkr.co/edit/7ewLoTgWWwyeo7HAvTqU?p=preview
you can add a ngPattern to the input you want to validate and then you just can use the $valid given by angularjs to validate that element.
<form name="myForm">
<input type="text" name="userName" ng-model="user.name" ng-pattern="{string}" >
</form>
//to test just use
{myForm.userName.$valid}
A client of mine has come to me with an error on his website's signup form.
Please see this url for an example.
All of the fields marked with an a asterisk is required but the placeholders in some (Date of birth, Flat / House number, etc.) are acting as input and allowing the form to be submitted without and actual content being entered.
Does anyone have any idea of a solution?
You could just use "real" placeholders (+ modernizr), instead of faking it. But to solve your problem you could check the value against its defaultValue. You could also do this on the inputs instead of hard-coding the values.
if (input.value !== input.defaultValue && (otherchecks))
And for emptying the input you could use this instead of checking for a hard-coded value
onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';"