Question

当我单击按钮时，我想验证字段，如果有任何错误，我想在顶部显示用户错误消息。

我正在验证，但我无法显示错误消息。问题究竟在哪里？。

$(document).on('click', '#button', function() {
  var FirstName = $('#fName').val();
  alert(FirstName);
  var LastName = $('#lName').val();


  if (FirstName.val() == '') {
    $("#error").append("Please enter First Name");
  } else if (LastName.val() == '') {
    $("#error").append("Please enter Last Name");
  }
});

<div data-role="content" style="padding: 15px;margin-top:21px">
  <p id="error"></p>
  <label for="text">First Name:</label>
  <input type="text" name="text" id="fName">
  <label for="text">Last Name:</label>
  <input type="text" name="text" id="lName">
  <a href="" data-role="button" id="button" onclick="dtlsSubmit()">SUBMIT</a>
</div>

Answer 1

＆＃13;

$(document).on('click', '#button', function() {
  var FirstName = $('#fName').val();
  var LastName = $('#lName').val();


  if (FirstName == '') {//remove .val()
    $("#fnameerror").show();
  } else if (LastName == '') {//remove .val()
    $("#lnameerror").show();
  }
});

＆＃13;

.error{
  
  display:none
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="content" style="padding: 15px;margin-top:21px">
  <p id="error"></p>
  <span id='fnameerror' class='error'>Please eneter First Name</span>
  <label for="text">First Name:</label>
  <input type="text" name="text" id="fName">
  <span id='lnameerror' class='error'>Please eneter Last Name</span>
  <label for="text">Last Name:</label>
  <input type="text" name="text" id="lName">
  <a href="#" data-role="button" id="button" ">SUBMIT</a>
</div>

＆＃13;

添加带有错误消息的范围，然后显示是否符合条件

Answer 2

主要问题是因为您将Firstname和Lastname变量设置为元素的字符串值，然后在if条件下尝试再次调用val()现在是一个字符串，因为该方法不存在会出错。

如果没有遇到错误（即所有字段都有值），您可以从jQuery事件处理程序中调用dtlsSubmit()方法，如下所示：

$(document).on('click', '#button', function(e) {
  e.preventDefault(); // stop the link being followed
  var $error = $('#error').empty(); // remove any errors added on the previous click
  var error = false;
  
  if ($('#fName').val() == '') {
    error = true;
    $error.append("<p>Please enter First Name</p>");
  } 
  
  if ($('#lName').val() == '') {
    error = true;
    $error.append("<p>Please enter Last Name</p>");
  }

  if (!error) 
    dtlsSubmit();
});

function dtlsSubmit() {
    console.log('dtlsSubmit...');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="content" style="padding: 15px;margin-top:21px">
  <p id="error"></p>
  <label for="text">First Name:</label>
  <input type="text" name="text" id="fName">
  <label for="text">Last Name:</label>
  <input type="text" name="text" id="lName">
  <a href="" data-role="button" id="button">SUBMIT</a>
</div>

请注意，我稍微修改了逻辑流程，以便在点击a时显示所有错误，而不是遇到第一个错误。这使用户能够立即了解所有问题并修复它们，而无需反复单击按钮以查找下一个错误。

Answer 3

这是我的建议 - 删除内联点击并将其放入验证

function dtlsSubmit() {
  // here you can send the data
}
$(document).on('click', '#button', function(e) {
  e.preventDefault(); // cancel click
  var FirstName = $('#fName').val();
  var LastName = $('#lName').val();
  var error = "";
  if ($.trim(FirstName) == '') {
    error += "Please enter First Name<br/>";
  } 
  if ($.trim(LastName) == '') {
    error += "Please enter Last Name<br/>";
  }
  $("#error").html(error); // empty if no error
  if (error=="") {
    dtlsSubmit();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-role="content" style="padding: 15px;margin-top:21px">
  <p id="error"></p>
  <label for="text">First Name:</label>
  <input type="text" name="text" id="fName">
  <label for="text">Last Name:</label>
  <input type="text" name="text" id="lName">
  <a href="" data-role="button" id="button">SUBMIT</a>
</div>

如何显示错误消息

3 个答案: