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

Question

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

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

另外，能否请您澄清一下您在 bootstrap .css 问题中的问题？