Question

问题是如果我用绿色填充第一个输入第二个输入高亮显示，如果用第二个输入高亮显示第一个输入高亮显示绿色我用这个脚本尝试了很多解决方案，但我不明白是什么问题

<form id="contactForm" method="post" class="form-horizontal">

  <fieldset>
    <legend align="">Information Personnel</legend>
    <div class="form-group">
            <div class="col-sm-5">
                <label>Prénom</label>
                <input type="text" name="1" class="form-control" placeholder="Prénom">
            </div>
            <div class="col-sm-5">
                <label style="display:block; text-align: right;">الإسم</label>
                <input type="text" name="2" class="form-control keyboardInput"  placeholder="الإسم" style="text-align: right;">
            </div>
    </div>

      <div class="form-group">
        <div class="col-md-9 col-md-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>
        </div>
    </div>
  </fieldset>
</form>

这是java脚本

$(document).ready(function() {

    $('#contactForm').bootstrapValidator({
        //container: '#messages',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            1: {
                validators: {
                    notEmpty: {
                        message: 'Veuillez remplir votre nom'
                    }
                }
            },
            2: {
                validators: {
                    notEmpty: {
                        message: 'Veuillez remplir votre hhhh'
                    }
                }
            }
        }
    });
});

Answer 1

将您的字段逐个放入表单组

<div class="form-group">
            <div class="col-sm-5">
                <label>Prénom</label>
                <input type="text" name="1" class="form-control" placeholder="Prénom">
            </div>
</div>
<div class="form-group">
            <div class="col-sm-5">
                <label style="display:block; text-align: right;">الإسم</label>
                <input type="text" name="2" class="form-control keyboardInput"  placeholder="الإسم" style="text-align: right;">
            </div>
    </div>

使用bootstrap验证器的问题

1 个答案: