我想在不使用任何框架的情况下验证引导模式中的表单 . 它实际上是一个简单的模态,只有一个输入文本和两个按钮“关闭”和“发送” . 用户应在输入框中键入他/她的名字,然后单击“发送” . 表单是使用方法发送的 .
我想要做的是,如果用户没有在输入框中输入任何内容并单击“发送”按钮,则输入框应该有一个红色边框,而不是默认的蓝色边框 . 这是我的模态的代码:
<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">×</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 回答
您需要更改
input
parent 元素div.form-group
, not the input itself 的CSS
类:单击提交按钮后
HTML
应如下所示:要实现此目的,请将
JavaScript
代码更改为:引导带中的div ...
正如你所看到的那样.help-block是display:none现在你编写javascript函数并检查验证,如果验证现在通过make it display:block ...那你可以这样做
享受靴带:)
它非常容易
只需通过javascript函数将类.has-error应用于div
只需在输入字段中使用必需的内容