Binding a dropdownList using knockout - javascript

I am new to knockout and MVC.
Am trying to bind knockout observable array to a dropdownlist.Here is the code I am using.
JS code
var Provider =
{
ProviderID: ko.observable(""),
FirstName: ko.observable(""),
LastName: ko.observable(""),
Certification: ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N"]),
Specialization: ko.observable(""),
TaxonomyCode:ko.observable(""),
SSN: ko.observable(""),
ContactNumber: ko.observable(""),
ContactEmail: ko.observable(""),
FacilityName: ko.observable(""),
}
ko.applyBindings(Provider);
Am trying to bind Certification field.
My HTML code is as follows
<head>
<title>CREATE PROVIDER</title>
</head>
<body>
<div class="container">
<h1 class="col-sm-offset-2">Enter Provider Details:</h1><br />
<form class="form-horizontal" role="form" id="ProviderDetailsForm">
<div class="form-group">
<label class="col-sm-2 control-label labelfont">FIRST NAME:</label>
<div class="col-sm-6">
<input type="text" class="form-control" autofocus="autofocus" placeholder="Enter the First Name" id="FirstName" data-bind="value: FirstName" onkeypress="return onlyAlphabets(event);">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">CERTIFICATION:</label>
<div class="col-sm-6">
<select class="form-control" id="Certification" data-bind="value: Certification, optionsCaption: 'Select a Certification'">
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">SPECIALIZATION:</label>
<div class="col-sm-6">
<select class="form-control" id="Specialization" data-bind="value: Specialization">
<option>Select a Specialization</option>
<option>Doctor</option>
<option>Facility</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">TAXONOMY CODE:</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Taxonomy code" id="TaxonomyCode" data-bind="value: TaxonomyCode" disabled="disabled">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">SSN:</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Enter the SSN" id="SSN" data-bind="value: SSN" onkeypress="return onlyNumbers(event);" maxlength="9">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_SSN">Enter the SSN</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">FACILITY NAME:</label>
<div class="col-sm-6">
<input type="text" class="form-control" data-bind="value: FacilityName" placeholder="Enter the Facility Name" id="FacilityName">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_FacName">Enter the Facility name</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">CONTACT NUMBER:</label>
<div class="col-sm-6">
<input type="text" class="form-control" data-bind="value: ContactNumber" placeholder="Enter the Contact Number" id="ContactNumber" onkeypress="return onlyNumbers(event);" maxlength="10">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_ContactNum">Enter the Contact Number</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">EMAIL ADDRESS:</label>
<div class="col-sm-6">
<input type="text" class="form-control" data-bind="value: ContactEmail" placeholder="Enter your email address" id="EmailAddress">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_EmailAddress">Enter the Email Address</label>
</div>
<div class="form-group">
<button type="submit" id="Submit" class="btn btn-primary col-sm-1 col-sm-offset-4">Submit</button>
<button type="reset" class="btn btn-primary col-sm-1">Reset</button>
</div>
</form>
</div>
<script type="text/javascript" src="../../Scripts/Create_Script.js"></script>
The other bindings seem to be working fine,But the dropdown list is not getting populated.New to this,So any guidance would be appreciated.

You need to have 2 properties for certification in your model - one to hold a list of available values, and one to hold the selected value. For example:
Certification: ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N"]),
SelectedCertification: ko.observable(""),
Then for your select element you can use binding as follows:
<select data-bind="options: Certification,
value: SelectedCertification,
optionsCaption: 'Choose a certification...'">
</select>

Related

Is there a way to save html forms in other html document as a table?

Is there a way to do this, and if possible, is there a way to reference those stored values from the forms, ie. I want to fill a form, and then to call the values from the form via button on the html page?
Here just for an advice, hope this post won't get deleted.
Ok this is the code, but somehow i am getting null values everywhere after i submit the form. please help here
<form class="container jumbotron">
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="FirstName">First Name</label>
<input type="text" class="form-control" id="FirstName" name="name" required>
</div>
<div class="col-md-4 mb-3">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" id="LastName" required>
</div>
<div class="col-md-2 mb-3">
<label for="Age">Age</label>
<input type="number" class="form-control" id="Age" required>
</div>
<div class="col-md-2 mb-3">
<label for="Sex">Sex</label>
<select class="custom-select" id="Sex" required>
<option selected disabled value="">Select gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="form-row">
<div class="col-md-3 mb-3">
<label for="City">Address</label>
<input type="text" class="form-control" id="Address" required>
</div>
<div class="col-md-3 mb-3">
<label for="PhoneNumber">Phone Number</label>
<input type="tel" class="form-control" pattern="^\d{3}\d{3}\d{3}$" id="PhoneNumber" required>
</div>
<div class="col-md-3 mb-3">
<label for="Email">Email</label>
<input type="email" class="form-control" id="Email" name="email" required>
</div>
<div class="col-md-3 mb-3">
<label for="Email">Secondary Email</label>
<input type="email" class="form-control" id="SecondaryEmail">
</div>
</div>
<div class="form-row">
<div class="col-md-3 mb-3">
<label for="date">Birthday</label><br>
<input type="date" id="Birthday" class="form-control" name="datemax" min="1900-01-01" max="2020-01-01" required>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox" required>
<label class="form-check-label" for="checkbox">
I agree to terms and conditions
</label>
</div>
</div>
<button class="btn btn-primary" type="submit" id="submit">Add new contact</button>
</form>
And this is the js file
let list1 = [];
const addlist1 = (event)=>{
event.preventDefault();
let list12 = {
id: Date.now(),
FirstName: document.getElementById('FirstName').nodeValue,
LastName: document.getElementById('LastName').nodeValue,
Age: document.getElementById('Age').nodeValue,
Sex: document.getElementById('Sex').nodeValue,
Address: document.getElementById('Address').nodeValue,
PhoneNumber: document.getElementById('PhoneNumber').nodeValue,
Email: document.getElementById('Email').nodeValue,
SecondaryEmail: document.getElementById('SecondaryEmail').nodeValue,
//Birthday: document.getElementById('Birthday').nodeValue
}
list1.push(list12);
document.forms[0].reset();
localStorage.setItem('clients', JSON.stringify(list1));
}
document.addEventListener('DOMContentLoaded' , ()=> {
document.getElementById('submit').addEventListener('click', addlist1);
});
you wanna use document.ready event which signals that the DOM of the page is now ready,so in the head of the html file you would add
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
and remove the DOMContentLoaded loaded event
JS File
$(document).ready(function() {
let list1 = [];
const addlist1 = event => {
event.preventDefault();
let list12 = {
id: Date.now(),
FirstName: document.getElementById("FirstName").nodeValue,
LastName: document.getElementById("LastName").nodeValue,
Age: document.getElementById("Age").nodeValue,
Sex: document.getElementById("Sex").nodeValue,
Address: document.getElementById("Address").nodeValue,
PhoneNumber: document.getElementById("PhoneNumber").nodeValue,
Email: document.getElementById("Email").nodeValue,
SecondaryEmail: document.getElementById("SecondaryEmail").nodeValue
//Birthday: document.getElementById('Birthday').nodeValue
};
list1.push(list12);
document.forms[0].reset();
localStorage.setItem("clients", JSON.stringify(list1));
};
document.getElementById("submit").addEventListener("click", addlist1);
});

User input validation Bootstrap 4 and JQuery?

I started learning Bootstrap 4 validation and there are few things that are not clear to me. Some of the situations are confusing in case where input fields that are not required are showing valid-feedback / invalid-feedback. Also, I'm wondering if there is a way to trigger validation with button on click instead of submit process? Here is example of what I have so far:
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<fieldset class="fieldset-info">
<legend class="hcs-legend">Add New Profile</legend>
<form name="new-profile" id="new-profile" class="needs-validation" novalidate>
<div class="form-group required">
<label for="agency">Profile Name:</label>
<input class="form-control" type="text" name="profile" id="profile" value="" maxlength="120" placeholder="Enter the official name of your profile" required>
<div class="invalid-feedback">Please provide Profile Name</div>
</div>
<div class="form-group required">
<label>Type:</label>
<select class="custom-select browser-default" name="type" id="type" required>
<option value="">--Select Type--</option>
<option value="1">Large</option>
<option value="2">Medium</option>
<option value="3">Small</option>
</select>
<div class="invalid-feedback">Please provide Type</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="fname">First Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="fname" id="fname" value="" maxlength="20" placeholder="Enter First name" required>
<div class="invalid-feedback">Please provide First Name</div>
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label" for="middle_ini">Middle Init:</label>
<div class="col-10">
<input class="form-control" type="text" name="middle_ini" id="middle_ini" value="" maxlength="1" placeholder="Enter Middle Initial (optional).">
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="lname">Last Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Enter Last name" required>
<div class="invalid-feedback">Please provide Last Name</div>
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="email">Email:</label>
<div class="col-10">
<input class="form-control" type="text" name="email" id="email" value="" maxlength="50" placeholder="Enter Email" required>
<div class="invalid-feedback">Please provide Email</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Physical Address</u></strong></div>
</div>
<div class="form-row">
<div class="form-group col-6 required">
<div class="row">
<label class="col-3 col-form-label" for="Addr1">Address 1:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr1" id="Addr1" value="" placeholder="Enter Physical Address 1" maxlength="40" required>
<div class="invalid-feedback">Please provide Address 1</div>
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="city">City:</label>
<div class="col-10">
<input class="form-control" type="text" name="city" id="city" value="" placeholder="Enter City" maxlength="25" required>
<div class="invalid-feedback">Please provide City</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<div class="col-3">
<label for="Addr2">Address 2:</label>
</div>
<div class="col-9">
<input class="form-control" type="text" name="Addr2" id="Addr2" value="" placeholder="Enter Physical Address 2" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="state">State:</label>
<div class="col-10">
<select class="custom-select browser-default" name="state" id="state" required>
<option value="">--Select State--</option>
<option value="ny">New York</option>
<option value="fl">Florida</option>
</select>
<div class="invalid-feedback">Please provide State</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr3">Address 3:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr3" id="Addr3" value="" placeholder="Enter Physical Address 3" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="zip">Zip:</label>
<div class="col-10">
<input class="form-control" type="text" name="zip" id="zip" value="" placeholder="Enter Zip Code, formatted: 99999 or 99999-9999" maxlength="10" required>
<div class="invalid-feedback">Please provide Zip</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr4">Address 4:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr4" id="Addr4" value="" placeholder="Enter Physical Address 4" maxlength="40">
</div>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
<label class="form-check-label" for="sameAddress">check this box if mailing address is the same of physical address</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Access options</u></strong></div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_1" id="flag_1" value="Y">
<label class="form-check-label" for="flag_1">Allow for access level 1?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_2" id="flag_2" value="Y">
<label class="form-check-label" for="flag_2">Allow for access level 2?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_3" id="flag_3" value="Y">
<label class="form-check-label" for="flag_3">Allow for access level 3?</label>
</div>
<div class="row">
<div class="col-12 text-center">
<input class="btn btn-primary" type="submit" name="save" id="save" value="Save">
</div>
</div>
</form>
</fieldset>
</div>
In the example above I used the code for validation form the Bootstrap web site. There is very little explained on how this works. I have few questions:
How I can trigger validation on click since I will use ajax to send request to the server?
Why fields that are not required are turning green (color around the input)?
How I can use pattern attribute to validate input value if it's correct or not with custom message for the user?
Please let me know if anyone knows how to achieve this?
Thank you.

Serialize a form in order to send it via Ajax

I want to send a form via Ajax, not via a submit button.
I defined the form as follows in the below code excerpt, and later I defined the jQuery function to trap the CREATE BUTTON action.
When I debug this I get that
console.log($('#customer_form').serialize()); does not throw anything.
Is this the right way of serializing a form?
Do the buttons need to be inside the <form></form> element?
Here is the used code:
HTML:
<form id="customer_form" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="name">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name" aria-describedby="name_help" placeholder="Name">
<small id="name_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_1">Address</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="address_line_1" aria-describedby="address_line_1_help" placeholder="Address Line 1">
<small id="address_line_1_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_2"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="address_line_2" aria-describedby="address_line_2_help" placeholder="Address Line 2">
<small id="address_line_2_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="town">Town</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="town" aria-describedby="town_help" placeholder="Town">
<small id="town_help" class="form-text text-muted"></small>
</div>
</div>
<button id="create" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button"><strong>Save</strong></button>
</form>
JavaScript:
$(document).ready(function(){
$('#create').click(function(event) {
console.log('foo');
alert($('#customer_form').serialize());
event.preventDefault();
});
});
You just forgot to add the name attribute to your inputs:
<input name="nameofInput" .... />
-------^
See the below snippet:
$(document).ready(function(){
$('#create').click(function(event) {
console.log('foo');
alert($('#customer_form').serialize());
event.preventDefault();
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="customer_form" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="name">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="name" id="name" aria-describedby="name_help" placeholder="Name">
<small id="name_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_1">Address</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="adress1" id="address_line_1" aria-describedby="address_line_1_help" placeholder="Address Line 1">
<small id="address_line_1_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_2"></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="adress2" id="address_line_2" aria-describedby="address_line_2_help" placeholder="Address Line 2">
<small id="address_line_2_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="town">Town</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="town" id="town" aria-describedby="town_help" placeholder="Town">
<small id="town_help" class="form-text text-muted"></small>
</div>
</div>
<button id="create" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button"><strong>Save</strong></button>
</form>

populate a form from backend with angularjs

I am new in angularjs, i want to have a filed form from database when the user want to update his profile. I have a webservice that can give all information for the logged user then another webservice to get the information that i need with the id of the user.This is my controller:
controller('myTalentisCtrl', function ($scope,$http) {
this.User_Talent={};
this.T_User={} ;
$http.get("/LoggedUser").success(function(data) {
alert(data);
this.T_User.lnId = data.lnId;
alert(this.T_User.lnId);
});
$http.get("/usertalent",this.T_User.lnId).success(function(data) {
alert(data);
this.User_Talent.user = data.user;
this.User_Talent.talent = data.talent;
});
$scope.modif=function(){
$http.put('updating/' + this.T_User.lnId, $scope.User_Talent).success(function(data) {
$scope.User_Talent = data;
});
};
this is a part of my form:
<div ng-controller="myTalentisCtrl" class="tab-content no-margin">
<!-- Tabs Content -->
<div class="tab-pane with-bg active" id="fwv-1">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="full_name">First Name</label>
<input type="text" ng-model="User_Talent.talent.strFirstName" class="form-control" name="first_name" id="first_name" data-validate="required" placeholder="Your first name" />
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label class="control-label" for="address_line_2">Address</label>
<input ng-model="User_Talent.talent.strAdress" class="form-control" name="address_line_2" id="address_line_2" placeholder="(Optional) your Address" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="full_name">Last Name</label>
<input type="text" ng-model="User_Talent.talent.strLastName" class="form-control" name="last_name" id="last_name" data-validate="required" placeholder="Your last name" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="city">City</label>
<input ng-model="User_Talent.talent.strCity" class="form-control" name="city" id="city" data-validate="required" placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="door_no">Phone Number</label>
<input ng-model="User_Talent.talent.lnPhone" class="form-control" name="phone_no" id="phone_no" data-validate="number" placeholder="Numbers only" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="zip">Zip</label>
<input ng-model="User_Talent.talent.lnZipCode" class="form-control" name="zip_no" id="zip_no" data-validate="number" placeholder="Numbers only" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="email">Email Adress</label>
<div class="input-group">
<span class="input-group-addon">
<i class="linecons-mail"></i>
</span>
<input ng-model="User_Talent.talent.strEmail" type="email" class="form-control" placeholder="Enter your email">
</div>
<!-- <label class="control-label" for="city">Email Adress</label>
<input ng-model="User_Talent.talent.strEmail" class="form-control" name="city" id="city" data-validate="required" placeholder="Current city" /> -->
</div>
</div>
Is there a way to initialize my ng-model with the existing values ?
you should perform a digest cycle to reflect the changes in the DOM.
Look into digest
https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Tab Validation not happening for Dropdownlist only

I have written some validations for my fields to happen on tab out.The validations work for all the input fields but the dropdown fields dont get valdated.
My HTML is as shown
<head>
<title>CREATE PROVIDER</title>
</head>
<body>
<div class="container">
<h1 class="col-sm-offset-2">Enter Provider Details:</h1><br />
<form class="form-horizontal" role="form" id="ProviderDetailsForm">
<div class="form-group">
<label class="col-sm-2 control-label labelfont">FIRST NAME:</label>
<div class="col-sm-6">
<input type="text" class="form-control" autofocus="autofocus" placeholder="Enter the First Name" id="FirstName" data-bind="value: FirstName" onkeypress="return onlyAlphabets(event);">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">LAST NAME:</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Enter the Last Name" id="LastName" data-bind="value: LastName" onkeypress="return onlyAlphabets(event);">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_LastName">Enter the last name</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">CERTIFICATION:</label>
<div class="col-sm-6">
<select class="form-control" id="Certification" data-bind="value:SelectedCertification,options: Certification, optionsCaption: 'Select a Certification'">
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">SPECIALIZATION:</label>
<div class="col-sm-6">
<select class="form-control" id="Specialization" data-bind="value: Specialization">
<option>Select a Specialization</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">EMAIL ADDRESS:</label>
<div class="col-sm-6">
<input type="text" class="form-control" data-bind="value: ContactEmail" placeholder="Enter your email address" id="EmailAddress">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_EmailAddress">Enter the Email Address</label>
</div>
<div class="form-group">
<button type="submit" id="Submit" class="btn btn-primary col-sm-1 col-sm-offset-4">Submit</button>
<button type="reset" class="btn btn-primary col-sm-1">Reset</button>
</div>
</form>
</div>
<script type="text/javascript" src="../../Scripts/Create_Script.js"></script>
The JS script is
$("#FirstName").blur(function () {
if ($(this).val().trim().length == 0) {
$(this).addClass('borderclass');
$("#Err_FirstName").show();
}
else {
$("#Err_FirstName").hide();
$(this).removeClass('borderclass');
}
});
//Scripts for the Certification
$("#Certification option:selected").blur(function () {
if ($('#Certification :selected').text() == "Select a Certification")
alert("Please choose a Certification");
});
//Scripts for the Specialization
$("#Specialization option:selected").blur(function () {
if ($('#Specialization :selected').text() == "Select a Specialization")
alert("Please choose a Specialization");
});
I have also attached an image
Could you please guide me in the right direction.Thanks.
I have also included the following jquery files in my solution if that helps
jquery.2.1.3.min.js and jquery-ui-1.11.2.js
Check this : http://jsfiddle.net/4vsr04o9/
$("#Specialization").blur(function () {
//alert("hello");
if ($('#Specialization :selected').text() == "Select a Specialization")
alert("Select a Specialization");
});
<div class="form-group">
<label class="col-sm-2 control-label labelfont">SPECIALIZATION:</label>
<div class="col-sm-6">
<select class="form-control" id="Specialization" data-bind="value: Specialization">
<option>Select a Specialization</option>
<option>Hello World</option>
</select>
</div>
</div>

Categories