Bootstrap Modals，在表单验证中结合Jquery和JS代码

Question

关于JQuery语法，我将有3个问题：

1）模态没有显示。 这可能是运算符（&&）问题吗？ 我该如何正确处理？ 仅在事物有效时才应显示。

2）如何结合提交预防默认和有效的类？ 我以前用过，但从未与JQuery结合使用。 我只希望模态显示何时is_email有效以及何时填写InputEmail，InputMessage和InputName字段。

$('#submit').click(function(submit){
        if($('#InputEmail'&&'#InputMessage'&&'#InputName').val().length === 0)&& (is_email=="valid") {
        $('#myModal').modal('show');
        submit.preventDefault();
       }

    );

4）如果我放置col-lg6，它将改变大小，但是文档说我必须添加此：

$('.message-group').attr({
                class: 'has-success'

可以，但是如果我添加col-lg6 form-group name-group，它将改变大小。 为什么是这样？

我的语法是：

/*JQUERY FORM EFFECTS*/

/*$('#InputName').on('input', function() {
    var input=$(this);
    var is_name=input.val();
    if(is_name){input.removeClass("invalid").addClass("valid");}
    else{input.removeClass("valid").addClass("invalid");}
});  Can I comment that out? */

$('#InputEmail').on('input', function() {
    var input=$(this);
    var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
    var is_email=re.test(input.val());
    if(is_email){
        input.removeClass("invalid").addClass("valid");

                }
    else{
        input.removeClass("valid").addClass("invalid");
    }
});

/* Display please enter a name. */

$('#InputName').focusout(function(){
        if($('#InputName').val().length === 0) {
            $('.name-group .message-block').text('Please enter your name.');
            $('.name-group').attr({
                class: 'has-error'
            }); // end attr
        } else {
            $('.name-group .message-block').text('');
            $('.name-group').attr({
                class: 'has-success'
            }); //end attr
        }
    }); //end focus out

$('#InputMessage').focusout(function(){
        if($('#InputMessage').val().length === 0) {
            $('.message-group .message-block').text('Please enter your message.');
            $('.message-group').attr({
                class: 'has-error'
            }); // end attr
        } else {
            $('.message-group .message-block').text('');
            $('.message-group').attr({
                class: 'has-success'
            }); //end attr
        }
    }); //end focus out

$('#InputEmail').focusout(function(){
        if($('#InputEmail').val().length === 0) {
            $('.mail-group .email-block').text('Please enter your email.');
            $('.mail-group').attr({
                class: 'has-error'
            }); // end attr
        } else {
            $('.mail-group .email-block').text('');
            $('.mail-group').attr({
                class: 'has-success'
            }); //end attr
        }
    }); //end focus out

$('#submit').click(function(submit){
        if($('#InputEmail'&&'#InputMessage'&&'#InputName').val().length === 0)&& (is_email=="valid") {
        $('#myModal').modal('show');
        submit.preventDefault();
       }

    );

我的表格：

      <div class="form-group name-group">
        <label for="InputName">Your Name</label>
        <div class="input-group">
          <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
          <span class="input-group-addon">
            <i class="glyphicon glyphicon-ok form-control-feedback"></i>
          </span>
       </div>
       <span class="text-block"></span>
     </div>

      <div class="form-group mail-group">
        <label for="InputEmail">Your Email</label>
        <div class="input-group">
          <input type="email" class="form-control" id="InputEmail" name="InputEmail" placeholder="Enter Email" required>
          <span class="input-group-addon">
            <i class="glyphicon glyphicon-ok form-control-feedback"></i>
          </span>
        </div>
        <span class="email-block"></span>
      </div>

      <div class="form-group message-group">
        <label for="InputMessage">Message</label>
        <div class="input-group"
>
          <textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
          <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span>
        </div>
        <span class="message-block"></span>
      </div>

      <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
    </div>
  </form>

Answer 1

您可以使用myModal的ID来显示div的标记吗？

另外，您是否正在寻找多选项目？ 如果是这样，那么这里是jQuery文档的链接，该文档包含在单个选择器调用中包含多个元素查询： http : //api.jquery.com/multiple-selector/

更像是：

    if($('#InputEmail,#InputMessage,#InputName').val().length === 0)
    {
        alert('not filled out');
        return false;
    }
    else return true;

另外，如果这是直接复制/粘贴，则在if语句上缺少右括号：

    if($('#InputEmail'&&'#InputMessage'&&'#InputName').val().length === 0)&& (is_email=="valid"))

另外，能否请您说明一下.css引导程序中的问题？