I want to know how to make custom validation with Parsley like below case.
<select name="salary_type" class="form-control" id="id_salary_type">
<option value="" selected="">---------</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
<option value="6">option6</option>
</select>
<input type="number" name="salary" class="form-control" value="None" step="0.25" data-parsley-errors-container="#salary-errors" id="id_salary">
<div class="errors-box">
<div id="salary-errors"></div>
</div>
I want to show error messages if input salary is empty and when selected option is option1 or option2.
However, I don't want to show error message when user selected --- or option3 or option4 or option5 or option6 and submit.
Help me, please.
Related
In my template i'm writing a form. But there is a problem. I want to show a dropdown select menü if checkbox is checked. Otherwise it won't be visible. Here is my codes:
<label for="webcam">Webcam*</label>
<input type="checkbox" name="webcam" value="checkbox">
<select>
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
<option value="4">1</option>
</select>
I want to tell user to select any option from select other than first (index=0). I saw few examples and tried but not working for me:
<select ng-model="patient.gender" name="gender" class="form-control" required>
<option>- Select -</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<div class="error" ng-show="Form.gender.$invalid">
Select gender
</div>
What to change here?
provide empty(default value) to option, so required field validation will fire on selection.
Html:
<select ng-model="patient.gender" name="gender" class="form-control" required>
<option value=''>- Select -</option> //Default value to empty
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
View Code Show the Drop Down In Client Side--
<select ng-model="employee.DeptId" class="form-control ng-pristine ng-invalid ng-invalid-required" required="">
<option disabled="disabled" value="">---Please Select---</option>
<option ng-repeat="Dep in ShowDep" value="{{Dep.Id}}">{{Dep.Name}}</option>
</select>
Angular Code In Edit Case----
$scope.EmployeeEdit = function (rowNumber) {
args = employeeArr[rowNumber];
$scope.employee.DeptId = args.DeptId;
}
Not clear about the structure of the data your binding.
So here I am showing your requirement with my own data. I think you could do the same in your cod also.
$scope.degrees = [
{"degree_code":"GB","degree_name":"Bachelor of Science"},
{"degree_code":"GR","degree_name":"Non Degree Undergraduate"}
];
$scope.selecteddegree = {degree_code:"GB"};
<!-- html -->
<select name="degree" class="form-control" ng-model="selecteddegree" ng-options="degree.degree_name for degree in degrees track by degree.degree_code" >
<option value=""> Select Degree </option>
</select>
Use ng-value instead of value in option tag.
<select ng-model="employee.DeptId" class="form-control ng-pristine ng-invalid ng-invalid-required" required="">
<option disabled="disabled" ng-value="">---Please Select---</option>
<option ng-repeat="Dep in ShowDep" ng-value="{{Dep.Id}}">{{Dep.Name}}</option>
</select>
I have this select which i need the default value to be empty, tried adding a option with value="?" and selected="selected" but it wont work, any ideas?
<select class="form-control"
id="Select7"
name="grossweightmeasurementunitcode"
ng-model="itemForm.grossweightmeasurementunitcode"
ng-required="true">
<option ng-repeat="unidadepeso in unidadespeso" value="{{unidadepeso.commoncode}}">{{unidadepeso.sigla}}</option>
</select>
try this:
<select
class="form-control"
id="Select7"
name="grossweightmeasurementunitcode"
ng-model="itemForm.grossweightmeasurementunitcode"
ng-required="true">
<option value="">--Select--</opton>
<option ng-repeat="unidadepeso in unidadespeso" value="{{unidadepeso.commoncode}}">{{unidadepeso.sigla}}</option>
</select>
I am trying to create dropdown using ng-options, but at edit page its not working.
js file :
$scope.items = [
{name:"Angular"},
{name:"java script"},
{name:"Css3"},
{name:"Html5"},
];
$scope.name= "Css3";
html file :
<div class="form-group">Name</label>
<select class="form-control" ng-model="name" ng-options="a.name for a in items track by a.name" placeholder="Select Item"></select>
</div>
its working fine.
but I got selected value like this :
name:{
name:"selectedValue"
}
but I want like this :
name:"selectedValue"
in $scope.selected after selected value from dropdown.
and I referred this blog
after comparing #Satpal's demo and my output by inspect element and getting this :
my output
<select class="form-control ng-pristine ng-valid" ng-model="name" ng-options="a.name as a.name for a in items" placeholder="Select Item">
<option value="0" selected="selected" label="Angular">Angular</option>
<option value="1" label="java script">java script</option>
<option value="2" selected="selected" label="Css3">Css3</option>
<option value="3">Html5</option>
</select>
Satpal's output:
<select class="form-control ng-pristine ng-valid" ng-model="name" ng-options="a.name as a.name for a in items" placeholder="Select Item">
<option value="0">Angular</option>
<option value="1">java script</option>
<option value="2" selected="selected">Css3</option>
<option value="3">Html5</option>
</select>
Use the following expression of ngOption
select as label for value in array
Code
a.name as a.name for a in items
DEMO