有人可以告诉我一种方法来验证我的文本框在 bootstrap 模式可以是 activated/clicked/opened 之前是否为空 php 吗？

Question

基本上我想让模态按钮检查它之前的文本框是否为空，如果为空则用户无法继续，直到它们被填充。

代码如下：

<form class="form-horizontal form-signin-signup" action="signup.php" method="post">

              <input data-toggle="tooltip" title="Enter a valid email address." type="email" name="email" required placeholder="Email Address">
              <input type="password" required name="password" placeholder="Password">
              <input type="password" required name="password_confirmation" placeholder="Repeat Password">
              <div> 
                <!-- Trigger the modal with a button -->
                <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal2">Sign up as an Jobseeker</button>
                <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Sign up as an Employer</button>
                <!-- Modal:Jobseeker -->
                    <div id="myModal2" class="modal fade" role="dialog">
                      <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Finalization</h4>
                          </div>
                          <div class="modal-body">
                            <p>Hello! Please add some additional information to finish the Sign up process.</p>
                            <i class="icon-question-sign" data-toggle="tooltip" title="This is required to receive notifications from the system."></i>&nbsp;<input type="text" required name="cellno" placeholder="63905XXXXXXX"><br>
                            <input type="submit" name="register" value="Finish" class="btn btn-primary btn-large">
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                          </div>
                        </div>

                      </div>
                    </div>
                <!-- End of Modal:Jobseeker -->
                <!-- Modal:Employer -->
                    <div id="myModal" class="modal fade" role="dialog">
                      <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Finalization</h4>
                          </div>
                          <div class="modal-body">
                            <p>Hello! Please add some additional information to finish the Sign up process.</p>
                            <input type="text" required name="fname" placeholder="Company Name">
                            <input type="text" required name="bpermit" placeholder="Business Permit"><br>
                            <label><i>Optional:</i></label>
                            <input type="text" name="url" placeholder="Website"><br>
                            <input data-toggle="tooltip" title="Click here to finish" type="submit" name="register" value="Finish" class="btn btn-primary btn-large">
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                          </div>
                        </div>

                      </div>
                    </div>
                <!-- End of Modal:Employer -->
              </div>
            </form>

非常感谢任何能回答我问题的人。

Answer 1

您可以为此使用一个简单的 jQuery。

$(".SUBMIT-BUTTON-CLASS").click(function(){
   //replace the "SUBMIT-BUTTON-CLASS for a class which involves all submit buttons
   //don't forget the period marker
   if ($('#elementID').val()==''){...}
   //this check's if the HTML referenced value is equal to empty string, you can make a check for every input field you want to compare
}

更多信息here

或...
您可以将 required 关键字放在 input 元素的末尾。这将避免提交表单时输入为空。示例：

<input type="text" name="something" required>

Answer 2

最简单的验证，没有 jquery 或任何其他库，可能如下所示：

if (document.getElementById("inputID").value !== ''){
   // proceed...
}

您让自己容易受到潜在恶意代码的攻击，因此建议使用额外的正则表达式（脚本标签等）；

一个资源：js validation

Answer 3

$(".form-horizontal").submit(function() {
   //in case if all Available Text boxes within the form are mandatory
    var checkEmptyInput = $(this).find("input[type=text]:visible").filter(function() { if($(this).val()=="") return $(this); }).length;
    if(checkEmptyInput>0) {
        alert("Missed Entering a Mandatory Field");
        $(this).find("input[type=text]:visible").filter(function() { if($(this).val()=="") return $(this); })[0].focus();
        return false;
    }
});

您可以使用上面的 jQuery 函数来验证您的表单（以防万一，如果所有可见的文本字段都是必填的）

使用的术语

$(".form-horizontal") jquery class 选择器已用于使用 class .form-control 定位元素，在您的情况下，这是您的定位HTML表格。了解更多 jQuery Selectors

.submit(function() 提交表单时要定位的事件

$(this)这里针对当前元素，了解更多$(this)

.filter() 这用于通过回调过滤所选元素，在这种情况下，这仅过滤空文本框

.find() 这是最快的 jQuery 选择器，这里用于仅查找主元素中可见的文本框 (.form-horizontal)

有人可以告诉我一种方法来验证我的文本框在 bootstrap 模式可以是 activated/clicked/opened 之前是否为空 php 吗？

Can someone show me a way to validate if my textboxes are not empty before the bootstrap modal can be activated/clicked/opened in php?

html

css

php

jquery

bootstrap-modal