JQuery validate dynamically added input fields against other dynamically added input fields - javascript

I have multiple pairs of input fields for start and end dates:
#foreach (var exam in exams){
<input type="date" data-val="true" required id="StartDate" value="exam.StartDate">
<input type="date" data-val="true" data-val-endError="Can't be before start date" required>
}
I'm using jQuery's validator.AddMethod to validate that the end date is after the starting date:
$.validator.addMethod("endError",
function (value, element, params) {
var startDate = $("#StartDate").on('input').val();
if (value.toString() <= startDate) {
return false;
} else {
return true;
}
});
$.validator.unobtrusive.adapters.addBool("endError");
The problem is the validation is always comparing the end dates to the first starting date. I want each end date to be compared to it's relevant starting date.
I'm still a newbie in javascript but I know that this is probably caused by the id being the same for all the startDate inputs, which is illegal html.
Is there a way to fix this?
Thanks!

the problem with your code is you are referencing always the same id StartDate
so its normal the validation is always from the same startdate. When you have lot of same id the search of id stops always at the first.
#foreach (var exam in exams){
<input type="date" data-val="true" required id="****StartDate*****" value="exam.StartDate">
<input type="date" data-val="true" data-val-endError="Can't be before start date" required>
}
and you have the same id for different tag, its not good in html.
in your validator, you reference the StartDate id
var startDate = $("#StartDate").on('input').val();
one solution will be to create an id indexed :
#{int i=1;}
#foreach (var exam in exams){
<input type="date" data-val="true" required id="StartDate#(i)" value="exam.StartDate">
<input type="date" data-val="true" data-val-endError="Can't be before start date" required>
i++;
}
you adapt the validator to trap the right id.
i suggest you to create an attribute data-id for example, and you put the id of StarDate: so in validator you trap the id of right date
$.validator.addMethod("endError", function (value, element, params) {
var idstartDate = $(element).attr("data-id");
var startDate= $(idstartDate).on('input').val();
:
and you modify the loop:
#{int i=1;}
#foreach (var exam in exams){
<input type="date" data-val="true" required id="StartDate#(i)" value="exam.StartDate">
<input type="date" data-id="#StartDate#(i)" data-val="true" data-val-endError="Can't be before start date" required>
i++;
}

Related

How to show multiple input fields using onchange function?

$(document).on("change","#noofpack",function(){
count = $(this).val();
for(i=1;i<=count;i++){
$("#packageDiv").html('<input type="text" class="form-control" name="unit_price[]" placeholder="Unit Price" required="">');
}
});
I want to show multiple input fields onchange noofpack if count is 3 then it must show three input fields but what happen here when I change noofpack then it show only 1 input fields. So, How can I do this? Please help me.
Thank You
$(document).on("change","#noofpack",function(){
count = $(this).val();
$("#packageDiv").html(""); // First empty the packageDiv
for(i=1;i<=count;i++){
// Append more instead oh HTML
$("#packageDiv").append('<input type="text" class="form-control" name="unit_price[]" placeholder="Unit Price" required="">');
}
});

angular js date validation message

I am trying to do from date, to date validation (todate > fromdate).
please check my html code
From Date <input type="text" placeholder="From Date" id="fromDate" min-view="1"
ng-change="getFromMonth(newcashbenifit.toDate, newcashbenifit.fromDate);"
name="cbFromdate" ng-model="newcashbenifit.fromDate" autoclose="true" bs-datepicker />
To Date<input type="text" placeholder="To Date" id="toDate" min-view="1"
ng-change="getToMonth(newcashbenifit.toDate, newcashbenifit.fromDate);"
class="form-control" name="cbTodate" autocomplete="off"
ng-model="newcashbenifit.toDate" bs-datepicker />
i am using below functions to validate this. please check below functions
$scope.getToMonth = function (selectedToMonth,selectedFromMonth){
if(selectedFromMonth > selectedToMonth ){
$scope.cashBenefitForm.cbTodate.$setValidity("message", false)
}else{
$scope.cashBenefitForm.cbTodate.$setValidity("message", true)
}
}
$scope.getFromMonth = function (selectedToMonth,selectedFromMonth){
if(selectedFromMonth > selectedToMonth ){
$scope.cashBenefitForm.cbFromdate.$setValidity("message2", false)
}else{
$scope.cashBenefitForm.cbFromdate.$setValidity("message2", true)
}
}
Validation is working well. please check below image.
validation working correctly. Now i changed From date as '04/2020'. in the occasion, to date validation still appear. it should remove, because now todate > fromdate. check attached image
how i do this validation correctly. ?

javascript get datepicker start or end value of attribute

<div class="input-daterange input-group" id="datepicker'">
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
I know the method goes something like this:
datestart = $("#datepicker").find("input").val();
However this returns 2 different value (Only showing the first one regardless what I do), how do I go about getting just the start or the end of the value?
I was trying something like this:
datestart = $("#datepicker2").find("input").attributes['name'=start].val();
Obviously that doesn't work... Can anyone shine some light on this issue?
You almost got it right:
datestart = $("#datepicker").find("input[name='start']").val();
dateend = $("#datepicker").find("input[name='end']").val();
or better yet:
datestart = $("#datepicker input[name='start']").val();
you can write the following to get the first value
$("input[name=start]").val();
to get the second value use
$("input[name=end]").val();

Set default value for arrows in input[number]

I have an input type="number" for selecting a year that should load empty:
<input type="number" placeholder="Select year" min="1930" max="2015" required
ng-custom-mask="9999" />
When the user selects the year by arrow keys, it starts in min value: 1930. It'd like something like 1980.
How do I set the custom "start" number to input[number]?
(Any HTML5, JavaScript (even AngularJS) would be nice...)
What about something like:
HTML:
<input
type="number"
placeholder="Select year"
min="1930"
max="2015"
required
ng-custom-mask="9999"
ng-model="points"
step="{{getStep()}}" />
In your controller:
$scope.getStep = function() {
if (!$scope.points) {
return 50;
}
return 1;
}
You could just add a value attribute
<input type="number" placeholder="Select year"
min="1930" max="2015" required ng-custom-mask="9999" value="1980"/>
I'm a bit late, but this can be 'solved' with a workaround:
Set your min and max to the same value, in this case 1980
On a change, check if min==max (and min==1980)
If yes, set your min and max to the actual values
i.e.
HMTL:
<input type="number" placeholder="Select year" min="1980" max="1980" required ng-custom-mask="9999" />
JQuery:
$("input[type=number]").on("change", function(){
if ($(this).attr("min") == $(this).attr("max") && $(this).attr("min") == 1980) {
$(this).attr("min", 1930);
$(this).attr("max", 2015);
}
});

Working with date picker: simple task

Below is a fiddle example as a starting point:
http://jsfiddle.net/1ezos4ho/8/
Essentially I would want the followings to happen:
The date selected to be dynamically be added as the value of the input, where it would be like <input type text value="date selected"....
Update:
<script>
$(function() { // on load function, everything inside here will not run until the pagehas had time to load
$("#dpick").datepicker(); //date picker added here at its state its only able to grab the startDate not the end date not sure why
$('.filter').click(function(){
document.getElementById("results").innerHTML = "<div class='loading-indication'><img src='ajax-loader.gif' /> Please wait... Loading New Courses...</div>";
var datastring = $('#testform').serialize(); // this will create key/value pairs to send to the phph page like `duration5=5` with a `&` sepparating each key/value pair
$('#display-datastring').html(datastring); // this line is just so you can see the variable being created
$.ajax({
url: 'fetch_pages.php',
type: 'post',
data: datastring,
success: function(res){
$('#results').html(res);
}
});
});
});
</script>
Below is the form:
<form id="testform">
<input type="text" placeholder="Start" style="width: 40%;" name="dateStart" class="filter" id="dpick" >
<label id="Paylbl0">To</label>
<input type="text" style="width: 40%;" placeholder="End" name="dateEnd" class="filter" id="dpick">
problem is function start to run as soon as i hit the input when it should only be executed oncce the date has been selected. For some reason the date picker only comes in action with start date and not end date.
Not sure you fully understand how the plug-in works. It'll assign the value. Here's a quick "alert" test I did to show you. Just select a date. It watches for a change to the input and then alerts the date selected - based on the VALUE.
Submit your form (or grab the input value via js, as per my example) and it should work.
http://jsfiddle.net/1ezos4ho/11/
A js example to show you...
var i = 3;
$(function() {
$(".dpick").datepicker();
$('.dpick').on('change', function() {
$val = $(this).val();
alert($val);
});
});
Also, make sure you name your inputs if you're submitting them via a form. based on your comment, you're doing a POST request which is looking for those items which haven't been identified.
In short, $_POST['endDate'] is looking for an input with the name, endDate.
<input type="text" name="startDate" placeholder="Start" style="width: 40%;" class="dpick" id="dpick0" >
<input type="text" name="endDate" style="width: 40%;" placeholder="End" class="dpick" id="dpick1">

Categories

Resources