2015-01-17 22 views
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"); 
}); 

我還附有圖片 enter image description here

可否請你指導我在正確的方向。謝謝。 我也包括在我的解決方案如下jQuery的文件,是否可以幫助 jquery.2.1.3.min.js和jQuery-UI-1.11.2.js

+0

對於dropdownlists,在JS代碼中刪除'選項:selected'並嘗試。 –

+0

我已經嘗試過了,即使沒有「選項:所選」關鍵字,它也不起作用。 –

回答

0

檢查: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>