Develop Reference

How can I set age with DatePicker?

I am trying to display age on the text field when I change the date picker. When I choose a date the value doesn't show up on the age text field. How can I display the age when I pick a date? Is there a better way of doing this?
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-id-card-o"></i> </span>
</div>
<input name="age" class="form-control" placeholder="Age" type="text" id="age">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-birthday-cake"></i> </span>
</div>
<input name="birthDate" class="form-control" type="date" id="birthDate">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
$(document).ready(function() {
$(document).on('change', '.birthDate', function() {
var a = moment($(this).val(), "MM/DD/YYYY").month(0).from(moment().month(0));
$('#age').val(a);
});
})

You have a couple of issues. Firstly, the element has no birthDate class, it's an id. As such the selector needs to be #birthDate, not .birthDate.
Secondly, the format of the date will depend on the user's locale. For example, mine displays in YYYY-MM-DD format. As such your explicit instruction to momentJS to parse the date in DD/MM/YYYY format caused it to be read incorrectly. You're better off not specifying the format and letting momentJS determine for itself.
With those issues addressed, try this:
jQuery($ => {
$(document).on('change', '#birthDate', function() {
var a = moment($(this).val()).month(0).from(moment().month(0));
$('#age').val(a);
});
})
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-id-card-o"></i> </span>
</div>
<input name="age" class="form-control" placeholder="Age" type="text" id="age">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-birthday-cake"></i> </span>
</div>
<input name="birthDate" class="form-control" type="date" id="birthDate">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>

How to fix: Tab index skips past disabled inputs

For our story we have to make sure our contact us page is accessible. We are supposed to make sure the tab order focus for each input in order for information to be read out on the screenreader. However, we have certain input fields that we don't want the user to be able to edit, however we still want them to be able to have the screen reader capture it. What is the best practice for this issue? What is the approach best to follow to solve this issue?
I found this example online and tried exploring the implementation of this fix Tab on disabled input. It is a css style approach to mitigating the problem but doesn't involve the disabled property.
<form [formGroup]="contactUsForm">
<div class="container pt-4">
<!-- Instructions -->
<div name="instructions-row" class="row">
<div tabindex="0" name="form-instructions" id="form-instructions" class="col justify-content-center">
Please fill out the form and click the send button to submit your message. If your question or comment is
about a specific account, enter the account name and account number in the body of the message.
</div>
</div>
<!-- Basic Info -->
<div name="basic-info-row" class="row">
<div class="col-xl-6 justify-content-center">
<!-- From -->
<div class="input-container">
<label for="from-input" class="liberty-text-secondary">
From
<span *ngIf="contactUsForm.get('from').hasError('required')" class="text-danger">
*
</span>
</label>
<input role="textbox" id="from-input" class="liberty-input col-12" formControlName="from" />
</div>
<!-- Account Number -->
<div class="input-container">
<label for="account-number-input" class="liberty-text-secondary">
Account Number
<span *ngIf="contactUsForm.get('accountNumber').hasError('required')" class="text-danger">
*
</span>
</label>
<input tabindex="0" role="textbox" id="account-number-input" class="liberty-input col-lg-4 col-md-12" formControlName="accountNumber" />
</div>
<!-- User ID -->
<div class="input-container">
<label for="user-id-input" class="liberty-text-secondary">
User ID
<span *ngIf="contactUsForm.get('userId').hasError('required')" class="text-danger">
*
</span>
</label>
<input tabindex="0" role="textbox" id="user-id-input" class="liberty-input col-lg-10 col-md-12" formControlName="userId" />
</div>
<!-- Name -->
<div class="input-container">
<label for="name-input" class="liberty-text-secondary">
Name
<span *ngIf="contactUsForm.get('name').hasError('required')" class="text-danger">
*
</span>
</label>
<input tabindex="0" role="textbox" id="name-input" class="liberty-input col-lg-10 col-md-12" formControlName="name" />
</div>
<!-- Phone Number -->
<div class="input-container">
<label for="phone-number-input" class="liberty-text-secondary">
Phone Number
<span *ngIf="contactUsForm.get('phoneNumber').hasError('required')" class="text-danger">
*
</span>
</label>
<input tabindex="0" role="textbox" id="phone-number-input" class="liberty-input col-lg-4 col-md-12" formControlName="phoneNumber" />
<span *ngIf="contactUsForm.get('phoneNumber').hasError('pattern')" class="text-danger">
Please enter a valid phone number.
</span>
</div>
<!-- Subject -->
<div class="input-container">
<label for="subject-input" class="liberty-text-secondary">
Subject
<span *ngIf="contactUsForm.get('subject').hasError('required')" class="text-danger">
*
</span>
</label>
<select tabindex="0" id="subject-input" class="liberty-select col-lg-11 col-md-12" formControlName="subject">
<option *ngIf="!contactUsForm.value.subject" [value]="null" selected disabled></option>
<option *ngFor="let subject of subjects" [value]="subject">{{subject}}</option>
</select>
</div>
</div>
</div>
<!-- Comments -->
<div class="row">
<div class="col-xl-10 justify-content-center">
<div class="input-container">
<label for="comments-input" class="liberty-text-secondary">
Comments
<span *ngIf="contactUsForm.get('comments').hasError('required')" class="text-danger">
*
</span>
</label>
<textarea tabindex="0" role="textbox" id="comments-input" class="liberty-text-area" formControlName="comments"></textarea>
</div>
</div>
</div>
<!-- Submit Button -->
<div class="row py-4">
<div class="col container">
<div class="row">
<button tabindex="0" role="button" id="submit-button" class="col-xl-2 col-3 btn liberty-button mx-3" [disabled]="contactUsForm.invalid"
(click)="onSubmitClick()">
Send
</button>
<button tabindex="0" role="button" id="cancel-button" class="col-xl-2 col-3 btn liberty-button mx-3" routerLink="/home">
Cancel
</button>
<span class="col-xl-8 col-6"></span>
</div>
</div>
</div>
</div>
</form>
The above code tabs through the enabled inputs only.

Use readonly attribute or css pointer-events none to make the input disabled. Use ngClass to add class dynamically.
component.css
.disabled {
pointer-events: none;
opacity: 0.5;
}
component.html
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input type="text" formControlName="userName">
<input type="text" formControlName="password">
<input [ngClass]="{'disabled':!form.valid}" readonly type="button" value="submit" >
</form>
Example
Note: If you use pointer events none with input type button make sure to add readonly attribute otherwise it will be submit able through enter button

JQuery fadeToggle jumps up and down

I Made a switch to toggle between 2 contact forms. Everytime when using the button, the second form jumps.
Take a look here:
https://imgur.com/G4kGqjl
Here is my js:
$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
$("#mail-form, #phone-form").fadeToggle();
});
And here my HTML:
<div class="div_switch">
<label>
<h1 class="switch_text">Email</h1>
</label>
<label class="switch">
<input name="checkbox" type="checkbox" value="checkbox">
<span class="slider round"></span>
</label>
<label>
<h1 class="switch_text">Rückruf</h1>
</label>
</div>
<div id="mail-form" class="mail-form">
<form class="" action="index.html" method="post">
<div class="contact-selector">
</div>
<div class="form-row">
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-signature"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
</div>
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope"></i></div>
</div>
<input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label for="exampleFormControlTextarea1"></label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Deine Nachricht..."></textarea>
</div>
</div>
<div class="email-btn-holder">
<button type="submit" class="reshape_btn email-submit">Senden</button>
</div>
</form>
</div>
<div id="phone-form" class="phone-form">
<form class="" action="index.html" method="post">
<div class="contact-selector">
</div>
<div class="form-row">
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-signature"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
</div>
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope"></i></div>
</div>
<input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
</div>
</div>
<div class="email-btn-holder">
<button type="submit" class="reshape_btn email-submit">Senden <span><i class="fas fa-arrow-right"></i></span></button>
</div>
</form>
</div>
I tried a couple of things. Setting the display of the parent div to absolute and some other css stuff i found on the webs but cant remember. But nothing helped.
I would really appreciate some help.
Thanks in advance!!

You should separate both forms and set a callback on your fadetoggle function (there's a completion event, use that to your favor). Try something like:
$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
if($("#mail-form").is(':visible')){
$("#mail-form").fadeToggle(function(){
$("#phone-form").fadeToggle();
});
} else {
$("#phone-form").fadeToggle(function(){
$("#mail-form").fadeToggle();
});
}
});
Also, check out the api:
http://api.jquery.com/fadetoggle/

I would go with #Mauricio Cárdenas' answer, but if you absolutly must have them fade at the same time, you can do this:
<style>
#parentDiv{position:relative}
#mail-form, #phone-form{position:absolute;top:0}
</style>
<div ID="parentDiv">
<div id="mail-form" class="mail-form">
//Your form code
</div>
<div id="phone-form" class="phone-form">
//Your form code
</div>
</div>
This sets both forms to absolute and places them at the same position. Adding the parent div set to relative assures the forms position won't be set by the body.

jquery each method not working as expected

I am currently working on a website and this particular section requires the user to enter their details in a form. What I am trying to achieve is the following;
If the user hits the submit button and any fields are empty, I want a span element, which is initially set to CSS display none, to show up for each respective input field which has not been filled.
However, nothing seems to be happening when I click on the button. When I go to the console, it does not display any error message.
Can someone please assist? Many thanks.
HTML:
<!-- START OF 'YOUR DETAILS' FORM-->
<section>
<div class="container">
<h3>Step 3: Your Details</h3>
<!-- SLIDE-IN DIV TO REPRESENT DAY PASS -->
<div class="row chosenmembership">
<div class="col-md-12 text-center" id="yourdetails">
<form action="" method="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" placeholder="Email Address" id="email" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Email is required!</span>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" placeholder="Full Name" id="name" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Name is required!</span>
</div>
<div class="form-group">
<label for="number">Contact Number:</label>
<input type="tel" placeholder="Contact Number" id="number" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Contact Number is required!</span>
</div>
<div class="form-group">
<label for="postcode">Post Code:</label>
<input type="text" placeholder="Post Code" id="postcode" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Post Code is required!</span>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="tel" placeholder="DD/MM/YYYY" id="dob" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
DOB is required!</span>
</div>
</form>
<div class="form-group">
<input type="submit" id="submit" value="CONTINUE">
</div>
</div>
</div>
</div>
</section>
<!-- END OF YOUR DETAILS FORM -->
JS / JQUERY:
$("#submit").click(function(){
var $formValues = $(".your-details");
var $warning = $(".warnings");
$($formValues).each(function(index){
if ($(this).val("")){
$($warning[index]).css("display","block");
}
})
})

When your running this code $($formValues).each(function(index){if ($(this).val("")){ console.log(this) and see in which context your function is running, the issue is that every time you write a function declaration it creates a new this context and thus the previous this is lost.

Your selectors are kind of redundant, keep the form from submission and show the warnings when any are empty seems to be your intent.
$("#submit").click(function(e) {
$(".your-details").each(function(index) {
if ($(this).val() =="") {
e.preventDefault();// no submit if not filled out
$(this).next('.warning').css("display", "block");// next sibling show
}
});
});
Thought about this for a bit and believe you might handle the form submit instead
$("form").on('submit', function(e) {
$(this).find('.warning').css("display", "none");// hide in case they fix input values
$(this).find(".your-details").each(function(index) {
if ($(this).val() =="") {
$(this).next('.warning').css("display", "block");// next sibling show
}
});
});
Alternately you might use a filter.
$("form").on('submit', function(e) {
$(this).find('.warning').css("display", "none");// hide in case they fix input values
var emptyInputs = $(this).find(".your-details")
.filter(function() {
return ($(this).val() =="");
});
if(!!emptyInputs) {
e.preventDefault();
emptyInputs.next('.warning').css("display", "block");
}
});

Except typo, there was one problem more, you are actually setting value, instead of checking it: if ($(this).val("")) If you change it, and fix typo, something like this should work. Simplified, your code could look like this:
$("#submit").click(function(){
var $formValues = $(".your-details");
$($formValues).each(function(index){
if ($(this).val()==''){
$(".warning").eq(index).css("display","block");
}
else {
$(".warning").eq(index).css("display","none");
}
})
})
Demo:
$("#submit").click(function(){
var $formValues = $(".your-details");
$($formValues).each(function(index){
if ($(this).val()==''){
$(".warning").eq(index).css("display","block");
}
else {
$(".warning").eq(index).css("display","none");
}
})
})
.warning {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- START OF 'YOUR DETAILS' FORM-->
<section>
<div class="container">
<h3>Step 3: Your Details</h3>
<!-- SLIDE-IN DIV TO REPRESENT DAY PASS -->
<div class="row chosenmembership">
<div class="col-md-12 text-center" id="yourdetails">
<form action="" method="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" placeholder="Email Address" id="email" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Email is required!</span>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" placeholder="Full Name" id="name" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Name is required!</span>
</div>
<div class="form-group">
<label for="number">Contact Number:</label>
<input type="tel" placeholder="Contact Number" id="number" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Contact Number is required!</span>
</div>
<div class="form-group">
<label for="postcode">Post Code:</label>
<input type="text" placeholder="Post Code" id="postcode" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Post Code is required!</span>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="tel" placeholder="DD/MM/YYYY" id="dob" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
DOB is required!</span>
</div>
</form>
<div class="form-group">
<input type="submit" id="submit" value="CONTINUE">
</div>
</div>
</div>
</div>
</section>
<!-- END OF YOUR DETAILS FORM -->
P.S. You can keep your: $($warning[index]) vars, but you should hide warnings, anyway (else block), if field is not empty.

Semantic-Ui modal jittery behaviour

I am using Semantic-UI for designing a site for my project and I while using modal, I am seeing a jittery behaviour.
Here is the link : Click Here to Enter The Project Site
Press the 'Register' button to open up the modal dialog, and you will notice the dialog being formed in the left side and then shows up properly.
Cannot understand the reason for this behaviour.
Some help will be appreciated.
Code :
<!-- Register Box -->
<div class="ui fluid standard modal" id="RegisterBox">
<div class="ui attached message" id="headerImage">
<div class="header" id="head">
Welcome to MeetUp!
</div>
<p id="subHead">Sign-up for a new account here.</p>
</div>
<div class="ui error form segment" id="regForm">
<div class="ui black row">
<div class="two fields">
<div class="field">
<label>First Name</label>
<input class="text" placeholder="First Name" type="text" name="fname" id="txtFn">
</div>
<div class="field">
<label>Last Name</label>
<input class="text" placeholder="Last Name" type="text" name="lname" id="txtLn">
</div>
</div>
</div>
<div class="two fields">
<div class="field">
<label>Email</label>
<input class="text" placeholder="Email Id" type="email" name="email" id="txtEmail">
</div>
<div class="field">
<label>Gender</label>
<div class="text ui selection dropdown" id="cmbSex">
<div class="default text">Select</div>
<i class="dropdown icon"></i>
<input type="hidden" name="gender">
<div class="menu">
<div class="item" data-value="male" data-text="Male">
<i class="male icon"></i>
Male
</div>
<div class="item" data-value="female" data-text="Female">
<i class="female icon"></i>
Female
</div>
</div>
</div>
</div>
</div>
<div class="two fields">
<div class="field">
<label>Password</label>
<input class="text" type="password" placeholder="Password" name="pass" id="txtPassword">
</div>
<div class="field">
<label>Confirm Password</label>
<input class="text" type="password" placeholder="Password" name="Cpass" id="txtRepeatPass">
</div>
</div>
<div class="ui blue button" id="btnSubmit">Register</div>
</div>
<i class="close icon"></i>
</div>

I've detected the problem. This is a caused by the new version of the library. Using the old version[stable] solved it.