首页 文章

在bootstrap模式中验证输入文本

提问于
浏览
5

我想在不使用任何框架的情况下验证引导模式中的表单 . 它实际上是一个简单的模态,只有一个输入文本和两个按钮“关闭”和“发送” . 用户应在输入框中键入他/她的名字,然后单击“发送” . 表单是使用方法发送的 .

我想要做的是,如果用户没有在输入框中输入任何内容并单击“发送”按钮,则输入框应该有一个红色边框,而不是默认的蓝色边框 . 这是我的模态的代码:

<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!--form-->

            <form class = "form-horizontal" id="myForm" method="post" action="test.php" role="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">My modal</h4>
                </div>
                <div class="modal-body">
                    <p>
                        Please enter your name:
                    </p>
                    
<div class="form-group"> <div class="col-lg-12"> <label class="control-label" for="firstname">Name</label> <input type="text" class="form-control required" id="firstname" name="firstname"> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button id="myFormSubmit" class="btn btn-primary">Send</button> </div> </form> </div> </div> </div>

我尝试使用javascript将输入文本的类更改为 has-error ,但它没有't produce the red outline. When I click on send it sends the empty value through the post method instead of Here' s我的javascript代码:

<script type="text/javascript">
        $('#myForm').validate({
            rules: {
                name: {
                    minlength: 1,
                    required: true
                },
            },
            highlight: function (element) {
                $('#firstname').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                $('#firstname').removeClass('has-error').addClass('has-success');
            }
        });
    </script>

我觉得我在这里混合了很多东西 . 我仍然是bootstrap和javascript的新手 . 如何获得所需的红色轮廓?谢谢 .

编辑:验证功能:

function validate() {
    var x = document.forms["myForm"]["firstname"].value;
    if (x == null || x == "") {
        return false;
    }
}

4 回答

  • 0

    您需要更改 input parent 元素 div.form-groupnot the input itselfCSS 类:

    单击提交按钮后 HTML 应如下所示:

    <div class="form-group has-error">
       <div class="col-lg-12">
          <label class="control-label" for="firstname">Name</label>
          <input type="text" class="form-control required" id="firstname" name="firstname">
        </div>
    </div>
    

    要实现此目的,请将 JavaScript 代码更改为:

    <script type="text/javascript">
      $('#myForm').on('submit', function(e) {
        var firstName = $('#firstname');
    
        // Check if there is an entered value
        if(!firstName.val()) {
          // Add errors highlight
          firstName.closest('.form-group').removeClass('has-success').addClass('has-error');
    
          // Stop submission of the form
          e.preventDefault();
        } else {
          // Remove the errors highlight
          firstName.closest('.form-group').removeClass('has-error').addClass('has-success');
        }
      });
    </script>
    
  • 1

    引导带中的div ...

    <div class="form-group">
        <div class="row">
    
            <label class="col-xs-2 col-sm-2 control-label">city:</label>
    
            <div class="col-xs-3 col-sm-3 formGroups"
                id="city_form1">
                <form:input name="city" class="form-control"
                    placeholder="City" data-toggle="tooltip"
                    data-placement="bottom" title="City" maxlength="15" />
    
                <small class="help-block col-sm-offset-0 col-sm-9"
                    style="display: none;">city must require</small>
            </div>
        </div>
    </div>
    

    正如你所看到的那样.help-block是display:none现在你编写javascript函数并检查验证,如果验证现在通过make it display:block ...那你可以这样做

    享受靴带:)

  • 1

    它非常容易

    只需通过javascript函数将类.has-error应用于div

    <div class="form-group has-error">
        <div class="row">
    
            <label class="col-xs-2 col-sm-2 control-label">city:</label>
    
            <div class="col-xs-3 col-sm-3 formGroups"
                id="city_form1">
                <form:input name="city" class="form-control"
                    placeholder="City" data-toggle="tooltip"
                    data-placement="bottom" title="City" maxlength="15" />
    
            </div>
        </div>
    </div>
    
  • 11

    只需在输入字段中使用必需的内容

    <input type="text" class="form-control required" id="firstname" name="firstname" required/>
    

相关问题