在bootstrap模式中验证输入文本 [英] Validate input text in bootstrap modal

问题描述

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

I want to validate a form in a bootstrap modal without using any framework. It's actually a simple modal with only an input text and two buttons "Close" and "Send". The user should type his/her name in the input box and click send. The form is the sent with the method post.

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

What I want to do is that, if the user doesn't enter anything in the input box of and clicks on the button "Send", the input box should have a red border circling it instead of the default blue border. Here's the code for my modal:

<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>
                    <br/>

                    <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-错误但它不会产生红色轮廓。当我点击发送它通过post方法发送空值而不是
这是我的javascript代码：

I tried using javascript to change the class of the input text to has-errorbut it doesn't produce the red outline. When I click on send it sends the empty value through the post method instead of Here's my javascript code:

    <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的新手。我怎样才能获得所需的红色轮廓？
谢谢。

I feel like I'm mixing a whole lot of things here. I'm still new to bootstrap and javascript. How can I go about getting the desired red outline? Thanks.

编辑：
验证功能：

Validate function:

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

推荐答案

你需要更改输入的 CSS 类 父元素 div.form-group ，不是输入本身：

You need to change the CSS classes of the input parent element div.form-group, not the input itself:

点击提交按钮后的 HTML 应如下所示：

The HTML after the submit button click should look like this:

<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 代码对此：

To achieve this, alter your JavaScript code to this:

<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>

这篇关于在bootstrap模式中验证输入文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！