How to validate three separate fields as a date - javascript

I am trying to validate a date that is separated into three fields (year, month, and day, of course). I cannot change these fields, as much as I'd like to. I am using the jQuery Validation plugin (also not by my choice). I cannot figure how to validate all three fields as one. Even validating them individually would suffice.
My HTML is as follows.
<div class="date-field requiredField">
<div class="date-picker hasDatepicker" id="dp1412187717156" style="display: none;">...</div>
<input type="text" class="month" required="required" maxlength="2" placeholder="MM" title="Month" value="1">
/
<input type="text" class="day" required="required" maxlength="2" placeholder="DD" title="Day" value="1">
/
<input type="text" class="year" required="required" placeholder="YYYY" title="Year" value="1973">
<span class="date-pick-button"></span>
<span class="date-clear-button"></span>
</div>
I am invoking the validator as follows:
$("#SignUp_Enrollment").validate({
focusInvalid : false,
rules: {
co_ssn: {
ssn: true
},
first_name: {
required: true
},
last_name: {
required: true
}
// some more rules
},
invalidHandler: function (form, validator) {
// style the invalid fields
},
submitHandler: function (form) {
form.submit();
}
});
I am of course validating other fields, but this plugin is not showing me any mercy. I've tried adding month, day, and year rules to no avail. Any suggestions on what direction to take?

Quote OP:
"Even validating them individually would suffice."
Your code is broken because none of the fields in your HTML markup contain a name attribute. A unique name is mandatory in order for this plugin to operate. It's how it keeps track of the input elements.
See: http://jqueryvalidation.org/reference/#markup-recommendations
It's not shown in your markup, but all relevant input elements must also be contained within <form></form> tags. This plugin will not work otherwise.
Since you already have the date saved into an hidden field, you can also just validate the hidden field.
<input type="hidden" name="myDate" />
Activate validation on hidden fields by using the ignore: [] option.
Then as long as this hidden field has a unique name attribute, you can apply validation rules the same as you would on any other field.
Use the errorPlacement callback to precisely place the message attached to the hidden field.

You can merge this three fields to one (hidden input), and validate this input
var day, month, year;
day = $('.day').val();
month = $('.month').val();
year = $('.year').val();
$('.hidden-date-input').val([day, year, month].join('-'));

Related

Compare two date fields using Parsley JS

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"/>

Required attribute to be shown visually

I have a form where some fields are required, and some others aren't.
Now:
Does Polymer provide any "out-of-the-box" way to mark an element as "required"?
If not, what's the best way, in CSS, to show that a field is required?
At the moment, once the form is submitted the required fields will be shown as such. However, this happens after the form is submitted (or attempted).
I would like the user to know that while the first name is required, the middle name isn't.
Am I missing something very obvious?
One way would be to use attribute prefix or suffix
<paper-input label="First Name">
<div prefix>*</div>
<div suffix>*</div>
</paper-input>
Another way would be to create a new input element
<span hidden={{!required}} class="required"> * </span>
<paper-input-container no-label-float="[[noLabelFloat]]"
always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]"
auto-validate$="[[autoValidate]]"
disabled$="[[disabled]]"
invalid="[[invalid]]">
But this does not make sense only for required field as you will have to emulate/copy the complete paper-input code
Here is basic example how I'm validating the inputs: Plunk
On each input change call the validation method,
if it passes - submit the form.
<paper-input
id="step"
type="number"
min="1"
max="10"
value="{{value}}"
editable
required
auto-validate="true"
invalid="{{invalid}}"
preventInvalidInput
error-message="value: {{value}} - means invalid is {{invalid}}"
on-change="stepChange">
</paper-input>
stepChange: function(e, detail) {
//validation code
//Fields must be revalidated on each change
var step = this.$.step;
var val_step = step.validate();
// if alll the inputs are valid then submit the form
if ( false == val_step )
{
console.log("not invalid");
}
else
{
console.log("invalid");
}
},

How do I use jQuery validation plugin to validation a collection of strings?

I have a Java (Spring MVC) bean that has a collection of strings as a bean property. I can render these in the Freemarker something like this:
[#list listOfStrings as aString]
<input name="${fieldName}[${aString_index}]" type="text" value="${(currentValue!'')?html}" maxlength="50"/>
[/#list]
That gives me a series of input fields named as "aString[n]", which correctly get passed into the List on the serverside.
This was a single String field and I've recently moved to having a collection. How can I modify my jQuery validation plugin plugin to validate each instance of that field and display validation messages as appropriate for each field?
Current validation stuff using syntax like this:
$('#myform').validate({
rules: {
aString: {
minlength: 16
}
},
messages: {
aString: {
minLength: "failed validation"
}
}
});
I need to be able to reference the collection of strings (aString[0], aString[1] .... etc) and render a message so the user knows which of those instances are in error.
For a min-size validation you don't need to create a new Rule, just mark your fields with minlength='16' and make sure they have ID and NAME, and that they have a label for then:
[#list listOfStrings as aString]
<label for="${fieldName}_${aString_index}">String: </label>
<input name="${fieldName}_${aString_index}" name="${fieldName}_${aString_index}" type="text" value="${(currentValue!'')?html}" maxlength="50" minlength="16"/>
[/#list]
And then, you call:
$("#myform").validate();
I ended up defining custom methods and applying them using a class. This meant I had to add a
<label for="xyz" class="error" />
element in the appropriate place in the HTML.
$.validator.addMethod("codeRequired", $.validator.methods.required,"Please enter a code");
$.validator.addMethod("codeMinLength", $.validator.methods.minlength, $.format("The code appears to be too short, Please enter a valid {0} digit code."));
$.validator.addClassRules("code", { codeRequired: true, codeMinLength: 16 });
I then add a class="code" to my input fields I want validating.
This appears to work, I'll update later if I find issues with this solution.

Jquery Validation does not start if mouse doesn't leave textbox the first time

I've only starting to use jquery validation plugin
And I'm using the most simplest form (see link attached)
However, i've notice a problem that i couldn't get an answer to, i've tried searching a whole different places
To reproduce the steps
1. Click into the name textbook
2. type any amount of letters (eg. abc)
3. backspace out everything
4. click or tab to the next textbook
This way jquery validation won't start, which is not what i want with the required rules.
Please help, and thanks alot!
Javascript code
$(document).ready(function(){
$("#form").validate({
ignore: "",
rules: {
name: {
required: true
}
},
messages: {
name: "Required Field"
}
});
});
And the HTML
<form id="form" method="" action="">
<label for="name">Name</label>
<div><input type="text" id="name" name="name"> </div>
<label for="what">What</label>
<input type="text" id="what" name="what">
</form>
http://jsfiddle.net/WW6fB/
I think is the normal behaviour. If you add a submit button, the validation will trigger when the user tries to submit the form.
If you want to force validation on blur you can add this to the validate config object:
onfocusout: function(e) {
this.element(e);
},
http://jsfiddle.net/9TUxn/

jQuery validation - Display error message for each field

http://jsfiddle.net/nXqd/qC2Ya/6/
Take a look at the jsfiddle. When I enter wrong data in two inputs and clicking submit, I only receive the error message on the first one. Now I want two of them which have the name attribute in the form displayed as well.
In this example, I use the same name on purpose to get these values on the backend easier. I just loop through the list and get all information.
You are doing it wrong. You have added same name for both fields. Same name attributes are used to combine the fields in a group. You have to use class based validation.
working demo http://jsfiddle.net/xr5g6/1/
Hope it fits your needs. :)
code
$("form").validate({
rules: {
number: {required: true, range: [1,2]},
number2: {required: true, range: [1,2]}
}
});
​html
<form name="myForm">
<fieldset>
<legend>My Form</legend>
<label for='number'>Number</label>
<input name='number'class='required'/> <br />
<label for='number'>Number</label>
<input name='number2' class='required'/>
<label for='change-range'>Max range</label>
<input name='change-range' class='required'/>
</fieldset>
<input type="submit">
</form>
​
You should use different name attriburtes for different inputs.
Demo: http://jsfiddle.net/xYTNw/

Categories