jquery - 我使用的验证不允许我移动到屏幕上的下一个选项卡，如果它留空

Question

<?php echo $this->Html->script('balaashjquery'); ?>
  <script type="text/javascript">
     jQuery(function(){
    $('#name').blur(function(){
      $nameval = $('#name').val();
      if($nameval ==""){
       alert('Name field should not be empty');
      }
    });


    $('#address').blur(function(){
      $addressval = $('#address').val();
      if($addressval ==""){
       alert('address field should not be empty');
      }
    });
          });

           </script>
          <?php echo $this->Form->create('Advertiser',
 array('controller' =>'advertisers', 'action' => 'add'));
         echo $this->Form->input('name', array('id'=>'name'));
  echo $this->Form->input('address', array('id'=>'address'));
   echo $this->Form->end('Save Advertiser');
 ?>

这是我使用的代码...如果我将字段留空，则会显示验证警报框，但如果字段留空，它不会让我进入屏幕中的下一个选项卡。我实际上需要关注第一个留空的字段。

Answer 1

对表单字段使用被动验证（例如向您的字段添加错误类），然后仅在提交表单时或在您执行 ajax 请求以提交数据之前进行主动通知。

像这样的东西：

function passive(e){
    // change the field
    $(e.target).toggleClass("ui-error",$(e.target).val() === "")
    // apply changes to the labels
    $(e.target).prev('label').toggleClass(...)
}
function aggressive(e){
    // find errors
    // alert errors
    // if errors return false
}
$("#loginForm").submit(aggressive);
$("[required]").blur(passive);

更好的是，像 jquery.validate 这样的验证插件允许您创建简单的规则并提供本地化的错误消息。

http://jsfiddle.net/hmEDm/

最后，如果你使用像 angularjs 这样的框架，那么你可以在 HTML 标记中做很多非常漂亮的与验证相关的事情。

首先，您应该var在变量声明（var $nameval, var $addressval）之前放置以保持全局范围清洁。