I have a dropdown in which when I select 'one' only then my input appears. That input is required field. What I want is when user select 'one' only then validation on the input works and hence on save button it shows error but if it selects other values or no value then on save it doesn't show validation error.
<form name="myForm" data-ng-submit="save(myForm.$valid)"novalidate="novalidate">
<div class="form-group">
<label class="col-md-6">Select:</label>
<select class="col-md-2" ng-model="val.value">
<option value="1" selected>one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<div ng-show="val.value=='1'">
<label class="col-md-3">one:</label>
<input type="number" class="col-md-4" ng-model="val.one" name="valOne" data-ng-class="{'has-error':myForm.valOne.$dirty && myForm.valOne.$invalid }" required="required"/>
<div class="col-md-2" data-ng-messages="myForm.valOne.$error"
data-ng-show="myForm.valOne.$touched ||myForm.$submitted">
<div class="error-message" data-ng-message="required">Please enter Value
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-warning"><i class="fa fa-save"></i>
Save</button>
</form>
Please recommend something.
You can use ng-required:
<input type="number" class="col-md-4" ng-model="val.one" name="valOne" data-ng-class="{'has-error':myForm.valOne.$dirty && myForm.valOne.$invalid }" ng-required="val.value == 1"/>
Related
I am developing a form in AMP, within this form, there is a register of students for enrollment. Users (parents) will be able to add two more students to the same registration. However, when I click to add another student, with all required forms filled out, amp-moustache displays the success message before clicking the submit button. When the new student is added by the user, the form is also required.
Sorry for my bad english.
<script src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<!-- required fields -->
<div class="form-group">
<label for="" class="label-forms">Name 1: *</label>
<input name="" type="text" class="" required>
</div>
<br/>
<button id="add-2" class="button" hidden on="tap:e2.hide,add-2.hide,remove-2.show, AMP.setState({customvalue: ''})">Remove Name 2...</button>
<button id="remove-2" class="button" on="tap:e2.show,remove-2.hide,add-2.show, AMP.setState({customvalue: 'true'})">Add Name 2...</button>
<div id="e2" hidden>
<input name="" type="text" class="" [required]="customvalue">
<div id="div-edu2" class="form-group">
<select name="" class="input-default" [required]="customvalue">
<option value="1" selected>A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</div>
<button id="add-3" class="button" hidden on="tap:e3.hide,add-3.hide,remove-3.show, AMP.setState({customvalue2: ''})">Remove Name 3...</button>
<button id="remove-3" class="button" on="tap:e3.show,remove-3.hide,add-3.show, AMP.setState({customvalue2: 'true'})">Add Name 3...</button>
<div id="e3" hidden>
<input name="" type="text" class="" [required]="customvalue2">
<div id="div-edu3" class="form-group">
<label class="label-forms" for="">Select 3: *</label>
<select name="" class="input-default" [required]="customvalue2">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
</div>
</div>
</div>
<!-- ... -->
<div class="col-10 mx-auto">
<input type="submit" value="Send">
</div>
<div submit-success>
<template type="amp-mustache">
<p class="text-center">Success!</p>
</template>
</div>
<div submit-error>
<template type="amp-mustache">
<p class="text-center">Fail.</p>
</template>
</div>
IMG 1 - FORM
IMG 2 - ON CLICK ADD BUTTON
IMG 3 - AMP MESSAGE
I simply solved this problem by changing the html tag from <button> to <a></a>. Solved it, but I still haven't figured out the reason for the problem with the button.
I want to update values into dropdown list but when I click in the form the value change to null.
knowing that the add works correctly . Anyone can help me please ?
this is my html code:
<div class="form-group">
<label for="service">Service</label>
<select id="service" class="form-control" ngModel="{{editPersonne?.service}}" name="serviceId">
<option value="">Service</option>
<option value="service.id" *ngFor="let service of services" >{{service.designation}}</option>
</select>
</div>
you should use varibale
<div class="form-group">
<label for="service">Service</label>
<select id="service" class="form-control" [(ngModel)]="{{editPersonne?.service}}" name="serviceId">
<option value="">Service</option>
<option [value]="service.id" *ngFor="let service of services" >{{service.designation}}</option>
</select>
</div>
or
<div class="form-group">
<label for="service">Service</label>
<select id="service" class="form-control" ngModel="{{editPersonne?.service}}" name="serviceId">
<option value="">Service</option>
<option value="{{service.id}}" *ngFor="let service of services" >{{service.designation}}</option>
</select>
</div>
Below is part of my CSS code for HTML. I want all the inputs to be filled when the button "register" is pressed. If I don't have an address, a little pop-up warning comes right up to the input field. I would like the same with a drop-down menu. I know the code gives you the warning when the button "register" is pressed because of the JavaScript code. But I am wondering: is it possible to change the location of that warning from the "register" button to the drop-down menu?
Thank you for all your help.
<html lang="en">
<body>
<div class="container">
<form class="form-signin" role="form" method="post" action=".">
<div class="form-group">
<label for="adress" class="form-text">Adress</label>
<input type="text" class="form-control" id="adress" placeholder="Rainbow 3" name="adress" required>
</div>
<div class="form-row">
<div class="form-group col-md-8" style="height:70px">
<label for="inputState" class="form-text">State</label>
<select id="inputState" class="form-control" name="state" required>
<option selected disabled value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<button href="/oglasi/" type="submit" class="btn btn-outline-secondary" role="button" aria-pressed="true" onclick="check(this)">Register</button>
</div>
<script language='javascript' type='text/javascript'>
function check(input) {
if (document.getElementById('inputState').value == "0") {
input.setCustomValidity('Choose state.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
<br>
</form>
</div>
</body>
</html>
you need setCustomValidity to select element
function check(input) {
const inputStateElm = document.getElementById('inputState');
if (inputStateElm.value == "0") {
inputStateElm.setCustomValidity('Choose state.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
--
Full code
<html lang="en">
<body>
<div class="container">
<form class="form-signin" role="form" method="post" action=".">
<div class="form-group">
<label for="adress" class="form-text">Adress</label>
<input type="text" class="form-control" id="adress" placeholder="Rainbow 3" name="adress" required>
</div>
<div class="form-row">
<div class="form-group col-md-8" style="height:70px">
<label for="inputState" class="form-text">State</label>
<select id="inputState" class="form-control" name="state" required>
<option selected disabled value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<button href="/oglasi/" type="submit" class="btn btn-outline-secondary" role="button" aria-pressed="true" onclick="check(this)">Register</button>
</div>
<script language='javascript' type='text/javascript'>
function check(input) {
const inputStateElm = document.getElementById('inputState');
if (inputStateElm.value == "0") {
debugger;
inputStateElm.setCustomValidity('Choose state.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
<br>
</form>
</div>
</body>
</html>
I am using bootstrap, I wanted to know is there something like a feature in bootstrap to do this?
<div class="form-group">
<label class="col-sm-6 control-label" for="textinput">Flooring material </label>
<div class="col-sm-6">
<select class="form-control" name="flooring_meterial">
<option value="0">-Select-</option>
<option value="1" >Earth,sand</option>
<option value="2">Dung</option>
<option value="3">Wood/planks</option>
<option value="4">Parquet or polished wood</option>
<option value="5">other</option>
</select>
<input type="text" placeholder="Other" class="form-control" name="f_m_other">
</div>
</div>
I want to activate this bellow input field, if the above select field value is "other"
Since I could not able to find a short cut for this using bootstrap, I thought to write this in native javascript.
function disable(select_val,input_id) {
var e = document.getElementById(select_val);
var strUser = e.options[e.selectedIndex].value;
if(strUser === "100"){
document.getElementById(input_id).disabled = false;
}
else{
document.getElementById(input_id).value = document.getElementById(input_id).defaultValue;
document.getElementById(input_id).disabled = true;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-6 control-label" for="textinput">Principle mode of water supply</label>
<div class="col-sm-6">
<select class="form-control" name="water_supply" id="water_supply" onchange="disable('water_supply', 'w_s_other')">
<option value="0">-Select-</option>
<option value="1">Shared/ public well</option>
<option value="4">Private pipe line</option>
<option value="5">Stream/river</option>
<option value="100" >Other</option>
</select>
<input type="text" placeholder="Other" class="form-control" name="w_s_other" id="w_s_other" disabled value="">
</div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="textinput">x2</label>
<div class="col-sm-6">
<select class="form-control" name="water_supply" id="x2" onchange="disable('x2', 'x2other')">
<option value="0">-Select-</option>
<option value="1">Shared/ public well</option>
<option value="5">Stream/river</option>
<option value="100" >Other</option>
</select>
<input type="text" placeholder="Other" class="form-control" name="w_s_other" id="x2other" disabled value="">
</div>
</div>
Try using change event at select element to set input disabled to true if value of select element is "5" with .prop()
$("select").change(function() {
$("+ input", this).prop("disabled", !(this.value === "5"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="form-group">
<label class="col-sm-6 control-label" for="textinput">Flooring material </label>
<div class="col-sm-6">
<select class="form-control" name="flooring_meterial">
<option value="0">-Select-</option>
<option value="1" >Earth,sand</option>
<option value="2">Dung</option>
<option value="3">Wood/planks</option>
<option value="4">Parquet or polished wood</option>
<option value="5">other</option>
</select>
<input type="text" placeholder="Other" class="form-control" name="f_m_other" disabled="true">
</div>
</div>
i am trying to align html controls next to each other without giving huge space and I try to override the bootstrap .css but no luck.
here is my screen looks like:
I have created JSFiddle and also below is my html code.
JSFIDDLE
<div class="row">
<div class="col-xs-4">
<div class="form-group1">
<label class="col-xs-5 control-label" for="">Rows per page:</label>
<div class="col-xs-4">
<form action="/SystemAdmin" id="form_header_pager" method="post" name=
"form_header_pager">
<select class="form-control" data-val="true" data-val-number=
"The field PageSize must be a number." data-val-required=
"The PageSize field is required." id="PageSize" name=
"PageSizeSelect">
<option selected="selected" value="10">
10
</option>
<option value="25">
25
</option>
<option value="50">
50
</option>
<option value="ALL">
ALL
</option>
</select>
</form>
</div>
</div>
</div>
<div class="col-xs-4">
<div>
<div>
<b>Total records:</b> 0
</div>
</div>
</div>
<div class="col-xs-4">
<div class="form-group1">
<label class="col-xs-5 control-label" for="">Show Records:</label>
<div class="col-xs-7">
<form action="/SystemAdmin" id="form_header_show_records" method="post"
name="form_header_show_records">
<select class="form-control" id="ShowRecords" name="showrecords">
<option value="all">
Show All Records
</option>
<option value="invalid">
Show Invalid Records
</option>
<option value="valid">
Show Valid Records
</option>
</select>
</form>
</div>
</div>
</div>
</div>
The big spaces within your layout are caused from using the grid column widths. Bootstrap provides inline form element styling and it's recommended to use that instead of the grid columns.
The additional CSS adjustment I had to make was your totals area. Since it didn't have an input or select element, the vertical alignment was slightly off. If you had a row of inputs (as show in Bootstrap's documentation), you wouldn't need any additional CSS here.
You can view this corrected code snippet below. Please note that you must run it in "Full Page" mode to view it correctly. By default the form-inline tool only works in viewports greater than 768px.
.record-results {
display: inline-block;
margin-bottom: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-inline">
<div class="form-group">
<form action="/SystemAdmin" id="form_header_pager" method="post" name="form_header_pager">
<label for="PageSize">Rows per page:</label>
<select class="form-control" data-val="true" data-val-number="The field PageSize must be a number." data-val-required="The PageSize field is required." id="PageSize" name="PageSizeSelect">
<option selected="selected" value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="ALL">ALL</option>
</select>
</form>
</div>
<div class="form-group ">
<span class="record-results"><strong>Total records:</strong> 0</span>
</div>
<div class="form-group">
<form action="/SystemAdmin" id="form_header_show_records" method="post" name="form_header_show_records">
<label for="showrecords">Show Records:</label>
<select class="form-control" id="ShowRecords" name="showrecords">
<option value="all">Show All Records</option>
<option value="invalid">Show Invalid Records</option>
<option value="valid">Show Valid Records</option>
</select>
</form>
</div>
</div>
JSBIN
your layout is confused me. So I did another to achieve.
The key code:
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Rows per page:</label>
<select name="" id="" class="form-control">
<option value="1">test</option>
<option value="1">test</option>
<option value="1">test</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputEmail2">Total records:</label>
<span class="text-danger">99</span>
</div>
<div class="form-group">
<label for="exampleInputName2">Show Records:</label>
<select name="" id="" class="form-control">
<option value="1">test</option>
<option value="1">test</option>
<option value="1">test</option>
</select>
</div>
</form>