0
我已經爲我的字段寫了一些驗證,可以在標籤輸出上發生。驗證適用於所有輸入字段,但下拉字段不會發生valdated。標籤驗證不僅僅發生在下拉列表中
我的HTML是如圖
<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>
JS腳本是
$("#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");
});
我還附有圖片
可否請你指導我在正確的方向。謝謝。 我也包括在我的解決方案如下jQuery的文件,是否可以幫助 jquery.2.1.3.min.js和jQuery-UI-1.11.2.js
對於dropdownlists,在JS代碼中刪除'選項:selected'並嘗試。 –
我已經嘗試過了,即使沒有「選項:所選」關鍵字,它也不起作用。 –