瀏覽表格並找到空字段

Question

我有一個窗體，當單擊按鈕時，我試圖遍歷檢查空字段，然后做一些事情，即警報，然后專注於空字段。

我有這個工作，但似乎然后完全禁用該頁面？

檢查后轉到AJAX通話，所以也許我遺漏了一些東西？

表單的HTML是

 $(document).ready(function() { $('#check').on('click', function() { $(".form-control").each(function() { if (!$(this).val()) { var status_id = $(this).attr("id"); var status = $(this).attr("data-name2"); document.getElementById("status_id").focus(); alert(status); return false; } }); }); // ... some unrelated code here }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Trading Name(s) * </div> <input type="text" id="trading_name" data-name="trading_name" data-name2="Please enter your trading name" class="ad1 form-control" /> <div>Registered Company Name * </div> <input type="text" id="company_name" data-name="company_name" data-name2="Please enter your company name" class="ad1 form-control" /> <button type="button" id="check" class="btn btn-check">CHECK</button> 

在此先感謝您的幫助或建議

Answer 1

這是代碼中的一個小錯誤。 您將status_id視為代碼中的字符串：

document.getElementById("status_id").focus();

而看一下代碼，似乎您打算將其作為局部變量：

var status_id = $(this).attr("id");

因此解決方法是將代碼更改為：

// status_id - the string, i.e. ID of the element in concern
document.getElementById(status_id).focus(); 

或者，通常，將整行替換為this.focus()因為this將引用所關注的元素。

這是修改后的代碼段：

 $(document).ready(function() { $('#check').on('click', function() { $(".form-control").each(function() { if (!$(this).val()) { var status_id = $(this).attr("id"); var status = $(this).attr("data-name2"); document.getElementById(status_id).focus(); // OR - this.focus(); alert(status); return false; } }); }); // ... some unrelated code here }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Trading Name(s) * </div> <input type="text" id="trading_name" data-name="trading_name" data-name2="Please enter your trading name" class="ad1 form-control" /> <div>Registered Company Name * </div> <input type="text" id="company_name" data-name="company_name" data-name2="Please enter your company name" class="ad1 form-control" /> <button type="button" id="check" class="btn btn-check">CHECK</button> 

---

更新：

要顯示有關錯誤的工具提示 ，您需要初始化$(this).tooltip()工具提示，然后打開$(this).tooltip('open') 。 同樣，如果您需要在模糊或任何其他事件下將其隱藏，則可以調用$(this).tooltip('close') 。

這是一個例子：

 $(document).ready(function() { // Set the title using data-name2 $(".form-control").each(function() { var tooltipText = $(this).data("name2"); $(this).attr("title", tooltipText); }); $('#check').on('click', function() { $(".form-control").each(function() { if (!$(this).val()) { var status_id = $(this).attr("id"); var status = $(this).attr("data-name2"); document.getElementById(status_id).focus(); // OR - this.focus(); // alert(status); $(this).tooltip(); $(this).tooltip("open"); return false; } else { $(this).tooltip(); $(this).tooltip("close"); } }); }); // ... some unrelated code here }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div>Trading Name(s) * </div> <input type="text" id="trading_name" data-name="trading_name" data-name2="Please enter your trading name" class="ad1 form-control" /> <div>Registered Company Name * </div> <input type="text" id="company_name" data-name="company_name" data-name2="Please enter your company name" class="ad1 form-control" /> <button type="button" id="check" class="btn btn-check">CHECK</button>