有人可以向我展示一种方法来验证我的文本框是否不为空，然后才能在 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?

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

代码如下：

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

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

$(".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 类选择器已用于使用类.form-control定位元素，在您的情况下，它是您的目标 HTML 表单。了解更多关于 jQuery 选择器

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

$(this)这里针对当前元素，请了解有关 $（this）的更多信息

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

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

最简单的

验证，没有jquery或任何其他库，可能看起来像这样：

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

您让自己对潜在的恶意代码开放，因此建议使用额外的正则表达式（脚本标签等）;

资源：js验证

您可以使用

一个简单的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
}

更多信息在这里

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

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