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引導程序中的問題？