Below are my code for 2 input fields in vuejs. The current validation rule is they both need to be numeric. I've read the official document here.
I need to add another rule, that max-amount must be bigger than min-amount. The trick is min-amount is user input, not pre-determined. How should I implement this customize validator?
<div class="min-section">
<label>Min</label>
<input type="text"
class="uk-input"
name="min-amount"
v-validate="'numeric'"
v-model="minAmount" />
</div>
<div class="max-section">
<label>Max</label>
<input type="text"
class="uk-input"
name="max-amount"
v-validate="'numeric'"
v-model="maxAmount"/>
</div>
You could bind min_value in the v-validate rules of the max-amount <input>:
<input name="min-amount" v-model="minAmount">
<input name="max-amount"
v-validate="'numeric|min_value:' + minAmount"
v-model="maxAmount">
demo
Also note if you don't have a specific reason to use a text input, you should consider using <input type="number"> (instead of <input type="text">) so that the user could only enter numeric values.
Related
I'm playing around with htmx and hyperscript and I want the "submit button" (Add User) to be enabled when all required input fields are valid in a form. In this case, a non-empty name and a valid email address must have been defined.
<form hx-post="/example" hx-target="#table tbody" hx-swap="beforeend">
<label class="control-label" for="nameInput">Name</label>
<input id="nameInput" name="name" class="form-control" type="text" required placeholder="John Doe"/>
<label class="control-label" for="emailInput">Email</label>
<input id="emailInput" name="email" class="form-control" type="email" required placeholder="john#doe.org"/>
<button _="<what should I write here??>" class="btn btn-primary" disabled>Add User</button>
</div>
</form>
What should I write instead of <what should I write here??> to make this happen?
Something like this should work:
<button _="on change from closest <form/>
for elt in <[required]/>
if the elt's value is empty
add #disabled then exit
end
end
remove #disabled" class="btn btn-primary" disabled>Add User</button>
https://jsfiddle.net/xy8vn5jk/20/
I like #1cg answer
I have slightly more stringent requirements than the OP.
What I required is such that when the user types but doesn't leave the focus, the button should still disable or enable correctly.
If use keyup is wiser to use debounced,
hence my version is
<button _="on keyup from closest <form/> debounced at 150ms
if (<[required]:invalid/>).length > 0
add #disabled
put 'Check All Fields' into me
then exit
end
remove #disabled
put 'Submit' into me
" disabled type="submit">
Fill Out Required Fields
</button>
https://codepen.io/simkimsia/pen/LYQgZZK
by using [required]:invalid and comparing the length you can avoid doing a for loop and a nested if. Please note the parenthesis to wrap ([required]:invalid)
When validating a group of fields, an error is shown for fields that are hidden in the DOM with a v-if attribute.
For example, I've got 3 fields:
<input name="foo" v-validate="'required'" />
<input name="bar" v-validate="'required'" />
<input v-if="showMe" name="foobar" v-validate="'required'" />
When I run my submit func I'm checking that none of the fields contain errors:
this.$validator.validateAll().then(() => {
... my check
});
I see the following error:
Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "#3". Use "attach()" first.
Detaching and reattaching my 'foobar' field as I update the "showMe" state seems verbose. Especially for my larger multistep forms.
Is there an easier way to prevent this error from appearing?
You need to combine v-show with dynamically applied validation rules. This is where you pass the rules as an object, with the first key:value being the rule name and a boolean for if required (which can be the same as the v-if boolean).
For VeeValidate 2 (old version in question)
<input name="foo" v-validate="'required'" /> <br >
<input v-show="showMe" name="bar" v-validate="{required: showMe}" />
See Sandbox Example for VeeValidate2
For VeeValidate 3
<validation-provider rules="required">
<input type="text" v-model="foo">
</validation-provider>
<validation-provider :rules="{required: showMe}">
<input type="text" v-model="bar" v-show="showMe">
</validation-provider>
See Sandbox Example for VeeValidate 3.
If you want to run a validation on hidden input, you just need to set field's display to none:
<input style="display: none">
This method works fine for me!
hope you're having a good time :)
I'm using a RESTful controller. Route looks like Route::controller('categories', 'CategoriesController');
I want to pass a value i.e. the category name user wants to delete
How do I do that? Or kindly point me in the right direction.
Note: I tried assigning a value to a hidden input field, when I used that hidden field's value, it was always empty, so the value is not binded to the input field "properly" in my jS function.
{{ Form::open(array('url'=>'categories/delete')) }}
<input style = "display: none;" type="hidden" name="asalDel" id = 'asalDelCat' value="acs" />
<input type='submit' class="btn btn-danger" value="Delete" />
{{ Form::close() }}
This is my form in my bladed-view
I want to set two JavaScript variables as the values of these textboxes.
Can anyone can help me?
<form name="myform1">
<input type="number" name="pop_size" value="3">
<input type="button" value="Pop Size" id="population" onclick="setValue()">
</form>
<form name="myform2">
<input type="number" name="totalIterations" value="2">
<input type="button" value="Iterations" id="Iterations" onclick="setValue()">
</form>
You can use getElementsByName() to get a list of elements by their names in the form. Since your names are unique (which isn't necessary in the spec, but is a good idea for this exact reason), the array returned by that function should have exactly one element in it. Something like this:
var firstVariable = document.getElementsByName('pop_size')[0].value;
var secondVariable = document.getElementsByName('totalIterations')[0].value;
Or did you mean that you want to set the values to what's in a variable? That would be the reverse:
document.getElementsByName('pop_size')[0].value = firstVariable;
document.getElementsByName('totalIterations')[0].value = secondVariable;
Is there a way to filter through inputs in Angular? I'd Imagine
var input = e.$filter(/a-zA-Z/);
I'm not sure to understand your question, but you can force a pattern on an input with the ngPattern directive.
<form name="theForm" novalidate>
<input type="text" ng-model="foo" ng-pattern="/a-zA-Z/" required/>
<button ng-click="update()" ng-disabled="theForm.$invalid">SAVE</button>
</form>