Question

我正在使用codeigniter php框架与ajax一起工作。

当我通过ajax提交表单时，如果表单出现错误，则输入颜色会发生变化。

但是，因为用户代理用户名输入中包含所有准备好的值。它变为绿色，如下图所示

但是当我添加这个

if ($('#input-' + key).length >= 1) {
    $('#input-' + key).val($('#input-' + key).val());
    $('#input-' + key).removeClass('is-invalid');
}

它删除了其他形式的输入is-invalid它应该只删除那些设置值为AS THOWN IN BOTTOM

问题如何确保输入中有一个设定值，is-invalid类将更改为is-valid，但其他空输入类is-invalid将保持设置。< / p>

<script type="text/javascript">
$( document ).ready(function() {
    $('#error').html(" ");

    $('#form-submit-button').on('click', function (e) {
        e.preventDefault();

        $.ajax({
            type: "POST",
            url: "<?php echo site_url('agent/register/validate');?>", 
            data: $("#agent-register-form").serialize(),
            dataType: "json",  
            success: function(data){
                $.each(data, function(key, value) {
                    $('#input-' + key).addClass('is-invalid');

                    if ($('#input-' + key).length >= 1) {
                        $('#input-' + key).val($('#input-' + key).val());
                        $('#input-' + key).removeClass('is-invalid');
                    }

                    $('#input-' + key).parents('.form-group').find('#error').html(value);
                });
            }
        });
    });

    $('#agent-register-form input').on('keyup', function () { 
        $(this).removeClass('is-invalid').addClass('is-valid');
        $(this).parents('.form-group').find('#error').html(" ");
    });
});
</script>

Answer 1

请检查在ajax call的成功函数中添加此代码。

＆＃13;

< script type = "text/javascript" >
  $(document).ready(function() {
    $('#error').html(" ");

    $('#form-submit-button').on('click', function(e) {
      e.preventDefault();

      $.ajax({
        type: "POST",
        url: "<?php echo site_url('agent/register/validate');?>",
        data: $("#agent-register-form").serialize(),
        dataType: "json",
        success: function(data) {
          $.each(data, function(key, value) {
            $('#input-' + key).addClass('is-invalid');

            if ($('#input-' + key).val().length >= 1) {
              $('#input-' + key).removeClass('is-invalid');
            }

            $('#input-' + key).parents('.form-group').find('#error').html(value);
          });
        }
      });
    });

    $('#agent-register-form input').on('keyup', function() {
      $(this).removeClass('is-invalid').addClass('is-valid');
      $(this).parents('.form-group').find('#error').html(" ");
    });
  }); <
/script>

＆＃13;

Answer 2

现在解决的问题是检查错误，每个部分需要添加以下语句。

if (data['error'] == true) {

    $.each(data, function(key, value) {
        if (value === ""){
             $('#input-' + key).addClass('is-valid'); 
        } else {
             $('#input-' + key).addClass('is-invalid');
        }
    });

}

Bootstrap无效，并且无法正常使用ajax

2 个答案: