I have this piece of code in my html file.
<div class="form-group"
[ngClass]="{'has-error': (countryVar.touched || countryVar.dirty) && !countryVar.valid }">
<label class="col-md-2 control-label" for="firstNameId">
Country
</label>
<div class="col-md-8">
<input class="form-control"
id="countryId"
type="text"
placeholder="Country (required)"
required
[(ngModel)]=customer.country
name="country"
#countryVar="ngModel" />
<span class="help-block" [hidden]="countryVar.touched">
Please enter your country.
</span>
</div>
</div>
Basically what I want to achieve is that after touched is true the message "Please enter your country " to be hidden.
How can I achieve that?
Related
I am using Boostrap to validate my registration form and I want user to provide three user name which should not be same. Now I cant prevent submitting but the boostrap form still showing that input field is correct, how can I mark it to be invalid for user to know which part they wrong?
html
<form class="needs-validation" novalidate>
<h6 class="d-inline-block pt-3">Please enter 3 choices for login username:</h6>
<div class="col-md-12 mb-3">
<label for="sys_user_first" class="form-label">
First Choice
<i class="fa-solid fa-star-of-life required-field fa-xs"></i>
</label>
<input type="text" class="form-control" id="sys_user_first" required>
<div class="invalid-feedback">
Please fill in the first choice and three choices should not be same.
</div>
<label for="sys_user_second" class="form-label">
Second Choice
<i class="fa-solid fa-star-of-life required-field fa-xs"></i>
</label>
<input type="text" class="form-control" id="sys_user_second" required>
<div class="invalid-feedback">
Please fill in the second choice and three choices should not be same.
</div>
<label for="sys_user_third" class="form-label">
Third Choice
<i class="fa-solid fa-star-of-life required-field fa-xs"></i>
</label>
<input type="text" class="form-control" id="sys_user_third" required>
<div class="invalid-feedback">
Please fill in the third choice and three choices should not be same.
</div>
</div>
</form>
JS
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false||$("#d_sys_user_first").val() === $("#sys_user_second").val() || $("#sys_user_first").val() === $("#sys_user_third").val() || $("#sys_user_second").val() === $("#sys_user_third").val()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
My view:
<div class="col-md-3">
<div class="form-group">
<label>Employee Id</label>
<input type="text" class="form-control" placeholder="Enter employee id" name="empid">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Employee Name</label>
<input type="text" class="form-control" placeholder="Enter employee name" name="empname">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Order Number</label>
<input type="number" class="form-control" placeholder="Enter order number" name="ordernumber" value="<?php echo $order_number;?>">
</div></div>
<div class="col-md-3">
<div class="form-group">
<label></label>
<a onclick="myFunctionfirst()" class="form-control">Proceed to order Create</a>
</div></div>
Once you click on 'proceed to order create' the second row is created. I want this to happen only when the first 3 fields in first row are filled.
And this is my controller:
public function index()
{
$empid = $_POST['empid'];
If ($empid == ""){
$this->load->model('invoice_model');
$data['stat']= $this->invoice_model->get_stationary();
$data['order_numbers']= $this->invoice_model->get_countnumber();
$data['order_number']= $data['order_numbers'][0]->count+1;
$data['page']='invoice/invoice_view';
$this->load->view("template",$data);
}
}
And it's throwing an error undefined index empid
first of all take form tag and put all your fields inside it.
then add "action" and method = "POST" attribute in form tag.you got this errro because there is no form tag in your HTML file.
I need to make a specific input field required based on the choice of a specific radio button. I have tried ng-required but doesn't seem to work.
I want to make the phone number field required if one chooses the payment method4 with the model ng-model="selected_payment_method=CC
<form ng-submit="proceed_payment()" type="post" name="paymentForm" novalidate>
<div class="col s12">
<div class="col s12">
<input name="payment" ng-model="selected_cc_method" class="with-gap" id="payment4" type="radio"
value="CC" ng-click="selected_payment_method = 'CC'"/>
<label class="fund-project-payment-method-label" for="payment4">CC</label>
</div>
</div>
</div>
<div class="col s12 shipping-details">
<div class="fund-project-additional fund-project-personal-details">
Personal Details
</div>
<label for="email" class="fund-project-personal-details-label">Email</label>
<input placeholder="Email" id="email" type="email" ng-model="email" class="validate" required>
<!--
Phone Number & Name a required field as well
-->
<label for="display_name" class="fund-project-personal-details-label">Name</label>
<input placeholder="Name" id="display_name" ng-model="name" type="text"
class="validate" required>
<label for="phone_number" class="fund-project-personal-details-label">Phone Number</label>
<input placeholder="Phone Number" id="phone_number" type="text" ng-model="phone_number" ng-required="selected_payment_method === 'CC'">
<input placeholder="Your message." id="personal_message" ng-model="personal_message" type="text"
class="validate" maxlength="200">
<span class="personal-message-text">
This will be displayed on the campaign page.
</span>
</div>
<div class="col s12 right">
<button type="submit" class="waves-effect waves-light btn-large orange white-text proceed-payment"
disabled="selected_payment_method == undefined || paymentForm.$invalid || selected_reward_total_amount == 0">
Next: Pay
<i class="fa fa-chevron-right" ng-if="!proccess_payment_spinner"></i>
<div class="preloader-wrapper small active right payment-loader" ng-if="proccess_payment_spinner">
<div class="spinner-layer spinner-white-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</button>
This is what I have done on the angular side to make sure payment is done.
What am I not doing right?
$scope.proceed_payment = function () {
$scope.proccess_payment_spinner = true;
if ($scope)
var payment_method = $('input:radio[name=payment]:checked').val();
if ($scope.selected_reward_details.limit_reward_amount &&
parseInt($scope.selected_reward_details.selected_quantity) > parseInt($scope.selected_reward_details.remaining_quantity)) {
$('#heading').html("Too many rewards!");
$('#message').html("Unfortunately the amount of rewards you've selected exceeds the number available.");
$('#error_modal').openModal();
return;
}
if (payment_method === "CC") {
ProjectPaymentService.initiateCCPayment(
$scope.project.id,
$scope.selected_reward_details.id,
$('#email').val(),
$('#display_name').val(),
$('#phone_number').val(),
$('#personal_message_display_name').val(),
$('#personal_message').val(),
parseInt($scope.selected_reward_details.selected_quantity),
parseFloat($scope.selected_reward_details.custom_amount),
parseFloat($scope.selected_reward_details.shipping_fee),
parseFloat($scope.selected_reward_details.reward_amount * $scope.selected_reward_details.selected_quantity),
parseFloat($scope.selected_reward_total_amount),
$('#address_1').val(),
$('#address_2').val(),
$('#country').val(),
$('#postcode').val(),
$('#city').val(),
$('#region').val()
).then(
function successHandler(data) {
$scope.proccess_payment_spinner = false;
var project_funding_id = angular.fromJson(data.data);
$location.path("mpesa_details/" + project_funding_id);
},
function errorHandler(data) {
$scope.proccess_payment_spinner = false;
console.log(angular.fromJson(data.data));
});
Radio type input does not need ng-click to set its value:
<input type="radio" name="payment" ng-model="selected_cc_method"
class="with-gap" id="payment4" value="CC" />
Now you can use selected_cc_method with ng-required:
<input placeholder="Phone Number" id="phone_number" type="text"
ng-model="phone_number" ng-required="selected_cc_method === 'CC'">
You can see here that when radio button is clicked, phone number input becomes required:
DEMO
You have two variables you are working with;
selected_cc_method
and
selected_payment_method
I would drop the ng-click and set the model of the radio and use the radio button value for the ng-required instead of trying to use another variable for this.
<input name="payment" ng-model="selected_payment_method" class="with-gap"
id="payment4" type="radio" value="CC"/>
<label class="fund-project-payment-method-label" for="payment4">CC</label>
<input placeholder="Phone Number" id="phone_number" type="text"
ng-model="phone_number"
ng-required="selected_payment_method === 'CC'">
I have created a basic form that contains various input elements (mainly text) all of the text boxes have the 'Required' attribute set plus a simple regex pattern. Using Angular 2's Form directive I am disabling a button if the field text inputs are empty or the regex is not met. This works as expected. However, thrown into the mix is a 'Select' element with 2 'Option' child elements. The first is my default and the second my data bound list. I would like to set the form.invalid property to true if the initial:
<option value="default">Select a department...</option>
is selected from the combo box.
My issue as it stands is that if I enter valid data into all of my text boxes but leave the combo box as 'Select a department...' the form.invalid property is false and the button is enabled. As 'Select a department...'
is not a valid value I need the button to become disabled if that is selected?
Current HTML select code as it stands
<form class="form-inline" #form="ngForm" novalidate>
<div class="col-sm-12">
<div class="form-group" [class.has-error]="AddfirstName.invalid && AddfirstName.touched">
<label class="col-sm-12 control-label" for="AddfirstName">First Name:</label>
<div class="col-sm-12">
<input class="form-control" #AddfirstName="ngModel" required pattern="\D+" placeholder="First Name" [ngModel]="firstName" (ngModelChange)="firstLetterOfFirstNameToUpperCase($event)"
name="firstName">
<div class="alert alert-danger" *ngIf="AddfirstName.invalid && AddfirstName.touched ">First Name Is mandatory and cannot contain numbers</div>
</div>
</div>
<div class="form-group" [class.has-error]="AddlastName.invalid && AddlastName.touched">
<label class="col-sm-12 control-label" for="AddlastName">Last Name:</label>
<div class="col-sm-12">
<input class="form-control" #AddlastName="ngModel" required pattern="\D+" placeholder="Last Name" [ngModel]="lastName" (ngModelChange)="firstLetterOfLastNameToUpperCase($event)"
name="lastName" />
<div class="alert alert-danger" *ngIf="AddlastName.invalid && AddlastName.touched ">Last Name Is mandatory and cannot contain numbers </div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group" [class.has-error]="AdduserName.invalid && AdduserName.touched">
<label class="col-sm-12 control-label" for="AdduserName">User Name:</label>
<div class="col-sm-12">
<input class="form-control" #AdduserName="ngModel" required placeholder="User Name" ngModel name="userName" />
<div class="alert alert-danger" *ngIf="AdduserName.invalid && AdduserName.touched">User Name Is mandatory</div>
</div>
</div>
<div class="form-group"[class.has-error]="Addpassword.invalid && Addpassword.touched">
<label class="col-sm-12 control-label" for="Addpassword">Password:</label>
<div class="col-sm-12">
<input type="password" class="form-control" #Addpassword="ngModel" required placeholder="Password" ngModel name="password" />
<div class="alert alert-danger" *ngIf="Addpassword.invalid && Addpassword.touched ">Password Is mandatory</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group" [class.has-error]="hasDepartmentError">
<label class="col-sm-12 control-label" for="Department">Department:</label>
<div class="col-sm-12">
<select class="form-control" id="Department" #AddDepartment="ngModel" [(ngModel)]="addDepartment"
[ngModelOptions]="{standalone: true}"
(change)="validateDepartment(AddDepartment.value)"
(blur)="validateDepartment(AddDepartment.value)">
<option value="default">Select a department...</option>
<option *ngFor="let department of departmentList">{{department.name}}</option>
</select>
<div class="alert alert-danger" *ngIf="hasDepartmentError">Department Is mandatory</div>
</div>
</div>
</div>
<div class="col-sm-12">
<button class="btn btn-primary" (click)="addUser(AddfirstName.value, AddlastName.value, AdduserName.value, Addpassword.value, AddDepartment.value);
AddfirstName.value=null;AddlastName.value=null;Addpassword.value=null;AdduserName.value=null;" [disabled]="form.invalid">Add</button>
</div>
</form>
</div>
</div>
Remove the value from your first option and mark your select required:
<select class="form-control" id="Department" #AddDepartment="ngModel" [(ngModel)]="addDepartment"
[ngModelOptions]="{standalone: true}"
(change)="validateDepartment(AddDepartment.value)"
(blur)="validateDepartment(AddDepartment.value)"
required>
<option>Select a department...</option>
<option *ngFor="let department of departmentList">{{department.name}}</option>
</select>
Seems you have forgotten to put required on your select. Your two-way binding also seems to take away the default value of the drop down list, so I would loose that and just use ngModel instead. You really don't need to use two-way binding in forms, the form names take care of that, and when you submit the form, you have a nice object to work with.
when you loose the ngModel, you also drop the ngModelOptions and use the name attribute instead, which would be needed for the form.
I'm also unsure about the validateDepartment method. You wouldn't need it, as you can validate this in the template.
So all in all the final snippet of your select could look like this:
<select required #addDepartment="ngModel" name="addDepartment" ngModel>
<option value="">Select a department...</option>
<option *ngFor="let department of departmentList">{{department.name}}</option>
</select>
<div *ngIf="addDepartment.errors?.required">
Department required!
</div>
Here's a
Plunker
to play with, where you can also see the object created from the form! :)
The problem: In my HTML sign-up form, I have 18 elements. Each element has a tabindex, starting with the first text input at 1 to the last form element at 18.
When I start out with the first text input, fill out the information and then tab . . . it goes nowhere. At least, that's what it seems to me. Then I tab again, and it goes to text input with tabindex="2" and I have no idea why this is. I get into one form field, then I have to tab 2 x to get to the next.
This is how half of the form reacts. This form is spread out over two columns. There are no elements that would separate the left part of the form from the right part of the form -- except for the layout, of course. The kicker is that the right part of the form behaves correctly. What gives?
And here's the pertinent code:
<form id="form1" name="form1" class="bsf-form topLabel page1" autocomplete="off" enctype="multipart/form-data" method="post" novalidate><!--534-->
<div id="billing-form-columns" class="row"><!--536-->
<div id="billing-column-1" class="span8"><!--537-->
<!--legend>Billing Information</legend-->
<!--div class="sub-legend">Please provide your billing and payment information.</div-->
<!-- ERRORS -->
<div id="errors" class="alert alert-error">
<!--button type="button" class="close" data-dismiss="alert">×</button-->
<div class="err-info"><span class="err-txt">Please address the following issues before the order can be placed:</span></div>
<div class="error-columns clearfix">
<div class="err-col-left"></div>
<div class="err-col-right"></div>
</div>
</div>
<!--SUCCESS-->
<div id="success" class="alert alert-success"></div>
<div class="row-fluid height60">
<label class="desc" for="companyName">Company Name<span class="req">*</span></label>
<input type="text" id="companyName" name="companyName" class="input-xxlarge xxlarge-redux focus" value="" tabindex="1" placeholder="" title="Enter the name of your company" />
</div><!--/row-->
<div class="row-fluid height60">
<label class="desc" for="firstName">Full Name<span id="req_2" class="req">*</span></label>
<input type="text" id="firstName" name="firstName" class="input-large" value="" tabindex="2" placeholder="" title="Enter your first name. If there is another name on the credit card, you can enter that below with the credit card information." />
<input type="text" id="lastName" name="lastName" class="input-large" value="" tabindex="3" placeholder="" title="Enter your last name. If there is another name on the credit card, you can enter that below with the credit card information." />
</div><!--/row-->
<div class="row-fluid height60">
<label class="desc" for="address">Address<span class="req">*</span></label>
<input type="text" id="address" name="address" class="input-xxlarge xxlarge-redux" value="" tabindex="4" placeholder="" title="Enter your billing address"/>
</div><!--/row-->
<div class="row-fluid height45">
<label class="desc" for="address2"></label>
<input type="text" id="address2" name="address2" class="input-xxlarge xxlarge-redux" value="" tabindex="5" placeholder="Address 2 (optional)" title="This field for a second address (suite, apartment, department, etc.) is optional"/>
</div><!--/row-->
<div class="row-fluid height60 clearfix">
<div class="label-two clearfix">
<span class="desc-left"><label class="desc" for="city">City<span class="req">*</span></label></span>
<span class="desc-right"><label class="desc" for="spr1">State / Province / Region</label></span>
</div>
<input type="text" id="city" name="city" class="input-large" value="" tabindex="6" placeholder="" title="Enter the city for your billing address" />
<input type="text" id="spr1" name="spr1" class="input-large" value="" tabindex="7" placeholder="" title="Enter the state, province or region associated with your credit card" />
</div><!--/row-->
<div class="row-fluid clearfix" id="city-state">
<div class="label-two clearfix">
<span class="desc-left"><label class="desc" for="pzc">Postal / ZIP Code<span class="req">*</span></label></span>
<span class="desc-right"><label class="desc" for="country">Country<span class="req">*</span></label></span>
</div>
<input type="text" id="pzc" name="pzc" class="input-large" value="" tabindex="8" placeholder="" title="Enter the Postal or ZIP Code associated with your credit card" />
<select id="country" name="country" class="width210" tabindex="9" title="Select the name of the country associated with your credit card" >
<option value="" selected="selected"></option>
<option value="US" >United States</option>
<option value="UK" >United Kingdom</option>
<option value="AU" >Australia</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div><!--/row-->
<div class="row-fluid height60 clearfix">
<div class="label-two clearfix">
<span class="desc-left"><label class="desc" for="emailField">E-mail<span class="req">*</span></label></span>
<span class="desc-right"><label class="desc" for="phoneIntl">Phone Number<span class="req">*</span></label></span>
</div>
<input type="text" id="emailField" name="emailField" class="input-large" value="" tabindex="10" placeholder="" title="Enter a valid e-mail address" />
<input type="text" id="phoneIntl" name="phoneIntl" class="input-large" value="" tabindex="11" placeholder="" title="Enter a valid phone number where we can reach you" />
</div><!--/row-->
</div><!--537-->
<div id="billing-column-2" class="span8"><!--860-->
<div class="cc-validator clearfix">
<div class="row-of-cards height60 clearfix">
<span class="visa">Visa</span>
<span class="mastercard">MasterCard</span>
<span class="amex">American Express</span>
<span class="discover">Discover</span>
</div>
<div class="row-fluid height60 clearfix">
<label class="desc" for="card_number">Credit Card Number<span class="req">*</span></label>
<input type="text" id="card_number" name="card_number" class="input-medium focused width210" value="" tabindex="12" placeholder="Credit Card Number" title="Enter a current and valid credit card number for any of the cards listed above." />
</div>
<div class="row-fluid height60 clearfix">
<div class="label-two-apart clearfix">
<span class="desc-left-apart-269"><label class="desc" for="expiry_date">Expiration Date<span class="req">*</span></label></span>
<span class="desc-right-apart-left"><label class="desc" for="cvv">Security Code<span class="req">*</span></label></span>
</div>
</div>
<div class="input-two-apart-850 clearfix">
<div class="input-left-apart clearfix">
<span class="month-year">
<select id="month-list" name="month-list" tabindex="13" title="Select the credit card expiration date (month and year)."></select>
<select id="year-list" name="year-list" tabindex="14" title="Select the credit card expiration date (month and year)."></select>
</span>
<span class="cvv-code">
<input type="text" id="cvv" name="cvv" class="input-mini" maxlength="3" value="" tabindex="15" placeholder="" title="Enter the security code from the back of your credit card. If you have an American Express card, the security code is on the front of the card." />
</span>
</div>
<div class="input-right-apart clearfix"></div>
</div>
</div>
<div class="row-fluid height60 clearfix">
<label class="desc" id="lbl-name-on-cc-card" for="name_on_card">Name on Credit Card<span class="req">*</span></label>
<input type="text" name="name_on_card" id="name_on_card" class="input-medium focused width210" value="" tabindex="16" placeholder="" title="Enter the name as it appears on the credit card"/>
</div>
<div class="row-fluid height60 clearfix">
<label class="desc" id="lbl-password1" for="password1">Password<span class="req">*</span></label>
<input type="password" name="password1" id="password1" class="input-medium focused width210" value="" tabindex="17" placeholder="" title="Enter a password containing uppercase and lowercase characters, numbers and special characters such as !, #, #, $, _ and %" />
</div>
<div class="row-fluid height60 clearfix">
<label class="desc" id="lbl-password2" for="password2">Re-enter Password<span class="req">*</span></label>
<input type="password" name="password2" id="password2" class="input-medium focused width210" value="" tabindex="17" placeholder="" title="Repeat the password you entered above" />
</div>
<div class="row-fluid clearfix" id="agreement">
<label class="desc">Agreement<span class="req">*</span></label>
<input type="checkbox" checked="checked" tabindex="18" value="I accept ACME INC's Terms and Conditions" class="field checkbox" name="acceptTerms" id="acceptTerms" title="You need to accept our Terms and Conditions before you can place your order.">
<label for="acceptTerms" class="choice">I accept the ACME INC <a target="_new" href="/terms.php">Terms and Conditions</a></label>
</div>
<div class="form-actions form-actions-plus">
<div class="btn-align-right"><button type="submit" class="btn btn-primary" id="bsfSubmit" tabindex="18">Accept Billing Information and Continue</button>
</div>
</div>
<input type="hidden" name="telephone" />
<input type="hidden" name="jsn" />
<input type="hidden" name="ctt" />
</div>
</form>
Really, all I need is another set of eyes to tell me where I might have got it wrong. thanks.
Turns out that removing all the tabindex tags did about 90% of the work. No problems anymore as far as getting from one form element to another.
The culprits were:
1) Other forms on the same page, and me thinking that tabindex is per form instead of per page.
2) Select2 assigns a tabindex of -1 to each select element it replaces. So tabbing to a select2 drop-down, as well as tabbing away from it, can cause random spastic web browser behavior.
Solution for #1: Remove all tabindex tags in all forms.
Solution for #2: Write a piece of JavaScript to make sure select2 elements always receive the focus, when you tab to it from the previous element, and make sure select2 elements always pass on the focus to the next form element.
// COMING FROM THE ELEMENT IMMEDIATELY BEFORE THE SELECT2:
$('#postalCode').on('keydown', function(evt){
if(evt.keyCode === 9){
evt.preventDefault();
var el = $('#s2id_country a');
if(input !== undefined){
input.focus();
}
}
});
// THEN FROM THE SELECT2 TO THE NEXT FORM ELEMENT
$('#s2id_country a').on('keydown', function(evt){
if(evt.keyCode === 9){
evt.preventDefault();
var el = $('#emailField');
if(el.length){
el.focus();
}
}
});
Perhaps there is a more elegant solution for this. Come to think of it, there might even be a possibility of writing a function and using jQuery lingo to find the next and previous elements. At any rate, thanks to everyone who has helped me figure this one out.