跨度的設定值，如果輸入爲空

我想驗證這種形式，並設置跨度值，如果相應的輸入值是空的。然而，.siblings()和.next()不工作。跨度的設定值，如果輸入爲空

$('#cf_submit').on("click", function(e) { 
 
    e.preventDefault(); 
 
    validateForm(); 
 
}); 
 

 
function validateForm() { 
 
    if ($('#cf_name').val() || $('#cf_email').val() == '') { 
 

 
    //$('.calc_error').text('Required'); //THIS WORKS 
 
    $(this).siblings('.calc_error').text('Required'); //doesnt work 
 
    //$(this).parent("div").children('span').text('Required') //doesn't work 
 

 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" method="post" novalidate="novalidate"> 
 

 
    <div> 
 
    <label for="cf_name">Name </label> 
 
    <input class="calc_input" type="text" id="cf_name" name="cf_name" pattern="[a-zA-Z0-9 ]+" size="40" /> 
 
    <br> 
 
    <span class="calc_error"><?php echo $nameErr; ?></span> 
 
    </div> 
 

 
    <div> 
 
    <label for="cf_email">Email </label> 
 
    <input class="calc_input" type="email" id="cf_email" name="cf_email" size="40" /> 
 
    <br> 
 
    <span class="calc_error"><?php echo $emailErr; ?></span> 
 
    </div> 
 

 
    <input type="submit" class="submit_button" id="cf_submit" name="cf_submit" value="Submit" /> 
 

 
</form>

來源

2017-04-15 input

貴validateFrom知道'this'背景？函數調用時，this的值是多少？你從點擊提交按鈕來調用它，但如果你嘗試它，它甚至不會是那個按鈕。作爲解決方案，你可以劃分'if'分爲兩個IFS：'IF cf_name問題，那麼$（ '＃cf_name'）的兄弟姐妹（ 'calc_error '）文本（' 必要'）; 。如果cf_email問題，那麼$（ '＃cf_email'）的兄弟姐妹（ 'calc_error '）文本（' 必要'）;' –

我試過了。它沒有工作。 https://jsfiddle.net/vhmja20b/ – input

你的小提琴在行上的if條件中有$（'＃cf_name'）。val'而不是$（'＃cf_name'）。val（）'（缺少括號） 7. –

validateForm使用「錯誤」 this。

它從提交按鈕調用，所以最多它應該代表該按鈕，而不是實際的輸入。
在這種情況下，validateForm從另一個函數調用。因此，它甚至不知道提交this。在這種情況下，它代表window。

作爲一個解決方案，你可以分割，如果分成兩個IFS：

IF cf_name problem THEN $('#cf_name').siblings('.calc_error').text('Required');

IF cf_email problem THEN $('#cf_email').siblings('.calc_error').text('Required');

來源

2017-04-15 22:17:06

的$範圍（這）是問題。查看附件截圖，查看控制檯中的相關示波器。 screenshot of console showing relevant objects

我準備了一個CopedPen與工作代碼。簡單地不使用$（this）.siblings（），而是使用$（'。calc_error'）來標識要更改的對象。

Link to Solution on CodePen

// $(this).siblings('.calc_error').text('Required'); //doesnt work 
    $('.calc_error').text('Required'); //It works

來源

2017-04-15 22:05:21

感謝您的回覆。看來你誤解了。請再次查看我的代碼片段。我可以讓它使用該代碼工作。但是，我只希望在相應的輸入字段爲空時顯示它。 – input

.siblings（）工作perfectly.But我認爲CSS選擇器中存在的問題你的情況。即$（this）.siblings表示窗口元素的同胞。因此，嘗試下面的代碼

jQuery的

$('#cf_submit').on("click", function(e) { 
    e.preventDefault(); 
    validateForm(); 
}); 

function validateForm() { 
    $('.calc_input').each(function() { 
    if ($(this).val() == "") { 
     $(this).siblings('.calc_error').text('* required'); 
    } else {  
     $(this).siblings('.calc_error').text(''); 
    } 
    }); 
}

CSS

span { 
    color: red; 
}

這裏是工作的jsfiddle：https://jsfiddle.net/xgtub06c/

來源

2017-04-16 06:48:44 selvarajmas

跨度的設定值，如果輸入爲空

回答

相關問題