Develop Reference

Why is the required attribute in javascript form validation only works for one button in my form?

<form class="address-form" id="form" name="addressForm">
<div class="form-container">
<div class="form-input abc">
<label>Full name</label>
<input class="form-input-name" type="text" name="full_name" placeholder="Enter your full name" maxlength="50" value="{{ customer.name }}" required>
<div class="input-error hidden" id="input-error-name">Please enter your name</div>
</div>
<div class="form-input abc">
<label>Email</label>
<input class="form-input-email" type="email" name="email" placeholder="Enter your email" maxlength="50" value="{{ customer.email }}" required>
<div class="input-error hidden" id="input-error-email">Please enter your email</div>
</div>
<div class="form-input abc">
<label>City</label>
<input class="form-input-city" type="text" name="city" placeholder="Enter your city" maxlength="50" required>
<div class="input-error hidden" id="input-error-city">Please enter your city</div>
</div>
<div class="form-input abc">
<label>Address</label>
<textarea name="address" class="form-input-address" placeholder="For example: 92 Nguyen Huu Canh street" required></textarea>
<div class="input-error hidden" id="input-error-address">Please enter your address</div>
</div>
<div class="form-check abc">
<label></label>
<input class="tickbox" type="checkbox" onclick="checkTickbox()" id="flexCheckDefault" style="cursor: pointer" name="default">
<label class="form-check-label" for="flexCheckDefault" style="cursor: pointer; font-weight: 500; font-size: 12px">
Set as default address
</label>
</div>
<div class="buttons-container abc">
<label></label>
<div class="button-group">
<button class="cancel-button btn btn-light" id="cancel" formnovalidate>Cancel</button>
<button type="submit" class="create-update-button btn btn-primary" id="create-update">Ship to this address</button>
</div>
</div>
</div>
</form>
I don't know why my code is acting weird, the required attribute works on the cancel button, but doesn't validate the form when I pressed the submit button. However, the submit button actually works when I commented out the cancel button. I currently have an event listener for the submit button which will send the form's data via a POST request when clicked, I don't know if that's the problem

By default button type is submit , since cancel button does not have type defined so it will work as submit . Add button type button to cancel button
<button type = 'button' class="cancel-button btn btn-light" id="cancel">Cancel</button>

the The required attribute only works with types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file. so you should specified the type in here :
<textarea name="address" class="form-input-address" placeholder="For example: 92
Nguyen Huu Canh street" required>
</textarea>

Is it possible to fire an event only once if any part of an Angular form element comes into focus?

I'm working with Angular forms and trying to see if there is a better way to fire an event on the first initial focus of any cell within a form. This way the event only gets called once.
I am aware you can fire an event by adding the attribute ng-focus to each of the cell elements. However, this will result in the event being fired every time each of the form's cell elements gains focus.
Lets say we have this form with inputs, text-areas, and radio buttons, etc.
I was hoping that this would work but it does not:
Adding the attribute ng-cell-has-focus="vm.clearAllMessages()" on the <form> element
<form
name="vm.form"
novalidate
ng-cell-has-focus="vm.clearAllMessages()"
ng-submit="vm.form.$valid && vm.sendForm($event)">
<div class="form-group">
<label for="name-id">Name</label>
<input id="name-id"
name="name"
type="text"
ng-model="vm.formData.username"
autofocus
required>
<div class="error-message"
ng-messages="vm.form.name.$error"
ng-if="vm.form.name.$touched || vm.form.$submitted">
<div ng-message="required">Name is required.</div>
</div>
</div>
<div class="form-group">
<label for="email-id">Email</label>
<input id="email-id"
name="email"
type="email"
ng-model="vm.formData.emailAddress"
required>
<div class="error-message"
ng-messages="vm.form.email.$error"
ng-if="vm.form.email.$touched || vm.form.$submitted">
<span ng-message="required">Email address is required.</span>
<span ng-message="email">Please enter a valid email address.</span>
</div>
</div>
<div class="form-group">
<input id="radio-1-id"
name="radio"
type="radio"
value="First option"
ng-model="vm.formData.radio"
required>
<label for="radio-1-id">First option</label>
<input id="radio-2-id"
name="radio"
type="radio"
value="Second option"
ng-model="vm.formData.radio"
required>
<label for="radio-2-id">Second option</label>
<div class="error-message"
ng-messages="vm.form.radio.$error"
ng-if="vm.form.radio.$touched || vm.form.$submitted">
<span ng-message="required">Choose an option is required.</span>
</div>
</div>
<div class="form-group">
<label for="message-id">Message</label>
<textarea id="message-id"
name="message"
cols="1"
rows="4"
ng-model="vm.formData.message"
placeholder="Type in Message here ..."
required></textarea>
<div class="error-message"
ng-messages="vm.form.message.$error"
ng-if="vm.form.message.$touched || vm.form.$submitted">
<div ng-message="required">Message is required.</div>
</div>
</div>
<div class="form-group">
<label for="terms-id">Agree to Terms of Use</label>
<input id="terms-id"
name="terms"
type="checkbox"
ng-model="vm.formData.terms"
required>
<div class="error-message"
ng-messages="vm.form.emailConfirm.$error"
ng-if="vm.form.emailConfirm.$touched || vm.form.$submitted">
<div ng-message="required">You must agree to Terms of Use.</div>
</div>
</div>
<button type="submit">SUBMIT</button>
</form>

Form input validation with angular js

I am trying to disable the button if all inputs are not populated, If they are populated then the button is enabled.
I am also trying to print text under the input if no text is present in the input field, but only if user clicks on the disabled button.
My question
How do I alter my code to enable my button once text is present in all the input fields and if they are not and the user clicks on the disabled button show
<div ng-if="!myForm.Lname.$invalid">
<p>This field is required</p>
</div>
but only if text is not present in the input fields.
FULL CODE
<div class="form-group">
<label for="first-name">First Name*</label>
<input type="text" class="form-control" name="Fname" placeholder="Enter first name" ng-model="formData.Fname" ng-required="true">
<div ng-if="!myForm.Fname.$invalid">
<p>This field is required</p>
</div>
</div>
<div class="form-group">
<label for="last-name">Last Name*</label>
<input type="text" class="form-control" name="Lname" placeholder="Enter last name" ng-model="formData.Lname" ng-required="true">
<div ng-if="!myForm.Lname.$invalid">
<p>This field is required</p>
</div>
</div>
<div class="form-group">
<label for="email">Email*</label>
<input type="email" class="form-control" name="email" placeholder="Enter a valid email address" ng-model="formData.email" ng-required="true">
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<button ui-sref="form.select" class="btn btn-block btn-info" ng-disabled="!myForm.Fname.$valid">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</button>
</div>
</div>

You can do this by creating your own directive.
I hope this will help you.
Here's a demo on Jsfiddle
HTML:
<div ng-app="sampleapp">
<div ng-controller="samplecontoller" ng-init="showData()">
<form name="form" disable-btn ng-submit="submitForm()">
<div>
<label>First Name:</label>
<input type="text" placeholder="First Name" ng-model="model.name" required>
</div>
<div>
<label>Last Name:</label>
<input type="text"placeholder="Last Name" ng-model="model.lname" required>
</div>
<div>
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div>

Change the task of a button placed in the footer of modal

I have a modal. In the header of the modal I have title which is login. And in the body I have a login form and in the footer I have login button.
After the login button I have a hyper text for those who wants to create account which by clicking on it the login form disappear and the register form appears.
Is there any possibility that I can use the same button for logging in to register. (In the simplest word is it possible to use the same button in 2 different forms or if I can't, how can I add a button to the footer and make it act as the submit button of the reiteration form)
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" style="background-color: #222">
<div class="mu-title">
<span class="mu-subtitle" id = "loginTitle">Login</span>
</div>
</div>
<!-- Body of the modal -->
<div class="modal-body" style="background-color: #222">
<form id="registerForm" method="POST" action="register.php" novalidate="novalidate" style="display: none">
<div class="form-group">
<label for="name" class="control-label" style="color: white">Full Name</label>
<input type="text" class="form-control" id="fullName" name="fullName" value="" required="" title="Please enter you full name" placeholder="Full Name">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="username" class="control-label" style="color: white">Username</label>
<input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="username#siswa.um.edu.my">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="password" class="control-label" style="color: white">Password</label>
<input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password">
</div>
<div class="form-group">
<label for="matrix" class="control-label" style="color: white">Matrix Number</label>
<input type="text" class="form-control" id="matrixNO" name="matrixNO" value="" required="" title="Please enter you Matrix Number" placeholder="Matrix Number ">
<span class="help-block"></span>
</div>
</form>
<form id="loginForm" method="POST" action="login.php" novalidate="novalidate">
<div class="form-group">
<label for="username" class="control-label" style="color: white">Username</label>
<input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="username#siswa.um.edu.my">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="password" class="control-label" style="color: white">Password</label>
<input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password">
</div>
</div>
<div class="modal-footer" style="background-color: #222">
<button type="submit" id ="loginButt" class="mu-readmore-btn">Login</button></br></br>
</form>
<span style="color: white" >Create an <a href= "#" style="color: white" onClick="$('#loginForm').hide();$('#registerForm').show(); " >Account</a> </span>
</div>
</div>

Here are some boilerplates that you can try with....(your part is just basically determining which form is active...)
$(document).ready(function(){
$('#submitbtn').click(function(e){
e.preventDefault();
var form=$('#currentForm').val();
if(form=="login")
{
alert('submit to login');
}
else
{
alert('submit to register');
}
});
$('#btnchange').click(function(){
var form=$('#currentForm').val();
if(form=="login")
{
$('#currentForm').val('register');
$('#registration-form').show();
$('#login-form').hide();
}
else
{
$('#currentForm').val('login');
$('#registration-form').hide();
$('#login-form').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form method="post" action="register.php" name="registration-form" id="registration-form" style="display:none;">
<label for="name">Name:</label>
<input type="text" name="usename"><br/>
<label for="emailid">Email ID:</label>
<input type="text" name="emailid"><br/>
<label for="password">Password :</label>
<input type="password" name="password">
</form><br/><br/>
<form method="post" action="login.php" name="login-form" id="login-form">
<label for="emailid">Email ID :</label>
<input type="text" name="emailid">
<label for="password">Password :</label>
<input type="password" name="password">
</form>
<input type="hidden" value="login" id="currentForm"/>
<input type="button" value="Submit" name="submitbtn" id="submitbtn">
<input type="button" value="Toggle Form" id="btnchange"/>

Just so I understand your question a little bit better, the basic idea of what you're trying to do is:
Single page modal, one form. Take user text input, check for existing user with that info, create new user if none exists?

how to access different form elements in an HTML page using Angular JS without using Views of Angular JS

Hi I am new to Angular Js and I am trying to make a Login page where I Have three forms which are as follows:
Login Form
Create New Account form
Forgot password Form.
All this forms are present in one HTML Page.HTML page for the login(login.html) is as follows:
<form class="login-form" ng-submit="submit()" method="POST" ng-controller="SignInController" >
<h3 class="form-title">Sign In</h3>
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
Enter any username and password. </span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Email Address</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Addresss" name="email" ng-model="email_id"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" ng-model="password"/>
</div>
<div class="form-actions" >
<button type="submit" class="btn btn-success uppercase">Login</button>
Forgot Password?
</div>
<div class="create-account">
<p>
Create an account
</p>
</div>
</form>
<form class="forget-form" method="post" ng-controller="ForgetPassword" ng-submit="passwordGenerator()"> <!-- action="#"-->
<h3>Sign In</h3>
<div class="form-group">
<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Address" name="email" ng-model="ForgetPassEmailId" />
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success uppercase btn-block">Reset my password</button> <!--type="submit" -->
</div>
</form>
<form class="register-form" action="select_pricing.html" method="post">
<h3>Create Account</h3>
<p class="hint">
Enter your personal details below:
</p>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Full Name</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Full Name" name="fullname" />
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Email Address</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Email Address" name="email" />
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control placeholder-no-fix" type="password" autocomplete="off" id="register_password" placeholder="Password" name="password" />
</div>
<div class="form-group margin-top-20 margin-bottom-20">
<label class="check">
<input type="checkbox" name="tnc" /> I agree to the <a href="#">
Terms of Service </a> & <a href="#">
Privacy Policy </a>
</label>
<div id="register_tnc_error">
</div>
</div>
<div class="form-actions">
<button type="submit" id="register-submit-btn" class="btn btn-success uppercase btn-block">Create</button>
</div>
</form>
The Angular Controller for the Forget password is as follows
var myApp = angular.module('Login_Upquire_Angular',[]);
myApp.controller("ForgetPassword",['$scope',function($scope){
$scope.passwordGenerator=function(){
var email_id=$scope.ForgetPassEmailId;
if (email_id=="abc#gmail.com"){
console.log("Reset Request is accepted");
window.location="/login.html";
}
}
}]);
As you can see based on my Angular js File, I want to check whether the given password matches with abc#gmail.com, if yes then it should print on my console "REset Request is accepted" and take me back to login page(/login.html) and to the form element namely login-form. Yet I am getting the following error
Cannot POST /login.html
Can somebody help me with this? I have tried but couldn't find a solution for it.

You'll have to do some asynchronous validation. Something like this: http://www.codelord.net/2014/11/02/angularjs-1-dot-3-taste-async-validators/