Question

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

1）模态没有出现。这可能是操作员（＆amp;＆amp;）问题？我怎么做对了？它应该只在事物有效时出现。

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问题中提出的问题？

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

1 个答案: