How can I compare two date fields using Parsley JS?
How can get the start date, while changing the end-date dynamically?
<input type="text" id="start-date"/>
<input type="text" id="end-date"/>
Is't simple (ParsleyJS)
data-parsley-equalto="#anotherfield"
from documentation:
Validates that the value is identical to another field's value (useful for password confirmation check).
<input type="text" data-parsley-equalto="#end-date" id="start-date"/>
<input type="text" data-parsley-equalto="#start-date" id="end-date"/>
Related
I'm currently using the JavaScript built in date-time. The max/min constraints, however, seem to only apply when the user uses the graphical arrows to change the values. For example, if I change the day in this code using the arrows, and try to increase the day past 06-14, it will automatically reset to 06-07. However, if I set the day manually using my keyboard, I can set it to any number, disregarding the max/min (i.e. I can set the date to 06-01 if I type in 1). Is there any way to fix this?
<label for="meeting-time">Choose a time for your appointment: </label>
<input type="datetime-local" id="meeting-time"
name="meeting-time" value="2018-06-12T19:30"
min="2018-06-07T00:00" max="2018-06-14T00:00">
All html5 validation works with form on submit. If you want to validate by own, apply on submit callback function. using novalidate attribute in form
<form action="#">
<label for="meeting-time">Choose a time for your appointment: </label>
<input type="datetime-local" id="meeting-time"
name="meeting-time" value="2018-06-12T19:30"
min="2018-06-07T00:00" max="2018-06-14T00:00">
<button type="submit">Submit</button>
</form>
You will need to convert the manual input to a js Datetime object first.
const yourDate = new Date(*userinput*);
I have a decimal number input field on a modal form in which I want make sure the user inputs a value less than another base value in my application like below.
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required max="data.baseNumber" />
But somehow the ng-max does not seem to trigger this validation and set the input box invalid. What could I be missing?
I would like to keep the type to be text so the up and down arrows are not displayed. And user can enter 4 or 5 digit numbers with decimal places.
Maybe the question should be what else can I use instead of ng-max that the value is validated against the base number.
Sample plunker
http://plnkr.co/edit/9SAgqkjOlqUEHXhcyaqB?p=preview
Try changing the input type to number instead of text.
The max and min attributes works with the following input types: number, range, date, datetime, datetime-local, month, time and week.
<input name="mainInput" type="number" size="10" ng-model="data.baseNumber" ng-max="3" required/>
To see the style changes add CSS rule
.ng-invalid{
border: 1px solid red;
}
Plunnkr
Your program has one error also with that.
TypeError: Cannot read property '$valid' of undefined
match the name of the form, you did mismach as numberForm, modalForm
Aslo make the field as number as type
Should be
<input name="modalInput" type="number" class="form-control" size="10" ng-model="data.myNumber" required max="data.baseNumber" />
If you want to keep type="text" I think you can not use ng-max to validate text type. So you can create an event for the input ng-change="change()"
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required ng-change="change()" />
The change() function to check max value for you when user enter
$scope.change = function(value) {
if (value> maxValue){// Do something here}
};
I have to use required='' on some fields, and then I use data-parsley-required on others. The parsleyJS is applying to the input fields that have required='' on them. Is there a way I can make the ParsleyJS only work on the fields that have the data-parsley-required on it?
Example:
I have the following fields
<input type="text" id="field1" data-parsley-required="true">
<input type="text" id="field2" required="">
Currently it parsley will try to validate both fields. How do i make it only validate if the field has data-parsley-required="true" on it?
Parsley will turn off HTML5 validations, so it's not clear that this is what you actually want...
If you're sure that's what you want, you could exclude [required] fields:
<form data-parsley-excluded="[type=submit], [type=button], [type=reset], [type=hidden], [required]">
Note that if you have other validations on these required fields, this will turn off those validations as well...
Otherwise, you'll have to tweak the source code directly.
Say I have the following form:
<form>
<input type="text" required ng-model='myValue' ng-maxlength='5'></input>
{{myValue}}
{{myValue.length}}
</form>
When the length of the text in the input exceeds the maxlength, the model becomes empty. Is there any way to prevent this behaviour while applying this validation, without rolling a custom form level validator?
at first, input element no end mark(</input), the correct like this:<input name="test" type="text"/>
you can handle form.test.$error.maxlength to deal something, example code:
<form name="form">
<input name="name" type="text" required ng-model='myValue' ng-maxlength='5'/>
<div>value:{{myValue}}</div>
<div>length:{{myValue.length}}</div>
<div>validate:{{form.name.$error.maxlength}}</div>
</form>
According your means, the invalid value lead to null model, I think this is no problem.
Today my challenge is this:
I have two inputs and a button:
Both inputs are date picker types. So When I pick a date from first input (for example I choose 11/19/2013) I want the second input to auto-complete to a one day later value. So the second one must pick 11/20/2013 automatically when I click the first input. I use these inputs to calculate a price(in my Magento store).
Below is the structure of my html (just a skeleton)
<div class="select_grid">
<input type="text" placeholder="mm/dd/yyyy" autocomplete="off" name="from" id="from" class="hasDatepicker">
<input type="text" placeholder="mm/dd/yyyy" autocomplete="off" name="to" id="to" class="hasDatepicker">
<input type="submit" name="Submit">
</div>
If you're happy to use JQuery You want to set something to the onChange handler of the from field.
Something like:
onChange="$('#to').attr('value',$(this).val());"
You'll have to modify it slightly. That syntax as it stands will just copy the value across. You'll need to use the javascript or jQuery date function to increment by one day/week etc.
An example of doing this is in this overflow question: Add +1 to current date