Question

如果相应的输入值为空，我想验证此表单并设置span的值。但是，.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>

Answer 1

validateForm正在使用“错误的”this。

从提交按钮调用它，因此它应该代表该按钮，而不是实际输入。
在这种情况下，从另一个函数调用validateForm。因此，它甚至不知道提交this。在这种情况下，它代表window。

作为解决方案，您可以将if分为两个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');

Answer 2

.siblings（）工作正常。但我认为css选择器是你的问题。那就是$（this）.siblings表示window元素的兄弟姐妹。所以请尝试以下代码

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/

Answer 3

$（this）的范围是问题所在。请参阅附带的屏幕截图，查看控制台中的相关范围。 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

如果输入为空，则设置span的值

3 个答案: