Question

我正在尝试发送表单数据并使用jquery获取响应并将其显示在模式窗口中。每个表单字段都是必需的，所以我使用attb required。点击提交数据应提交给jquery并获取响应。但如果任何字段为空，则应显示错误。现在问题是它还切换模态窗口。请参阅下面的代码。

<form name="newjoin" method="post" enctype="multipart/form-data" id="JoiningConform">

<label for="sponsorid">Name: <span class="req">*</span></label>
<input type="text" id="name" name="name" placeholder="Your Name" class="form-control" tabindex="1" required />

<button type="submit" data-toggle="modal" href="#myModal" class="button btn btn-primary btn-large">Register</button>


<div id="myModal" class="modal fade in">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <a class="btn btn-default pull-right" data-dismiss="modal"><span class="fa fa-remove"></span></a>
                    <h4 class="modal-title">CONGRALUATIONS</h4>
                </div>
                <div class="modal-body">
                    <h4>Text in a modal</h4>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                    <div id="modal-div"></div>
                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dalog -->
    </div><!-- /.modal -->

我的jquery是

$('form#JoiningConform').on('submit',function(event){
    event.preventDefault()

    $.ajax({
        type:'post',
        url:'testmodal.php',
        data:$('form#JoiningConform').serialize(),
        success: function(response){
            if(!response){
            $('#modal-div').html(response).modal('show');
             }
            }
        });
    });

我担心，如果我点击按钮，如果任何字段为空，它应该只显示成功响应后出现错误仅显示模态窗口。

示例图片

Answer 1

试试这个...... 首先验证名称字段。

$('form#JoiningConform').on('submit',function(event){
  event.preventDefault()
  var name = $('#name').val();
  if(name == ""){
    alert('error message');
    return false;
  }else{
    $.ajax({
        type:'post',
        url:'testmodal.php',
        data:$('form#JoiningConform').serialize(),
        success: function(response){
            $('#myModal').modal('show');
            $('#modal-div').html(response);
        }
    });
  }
});

如果from字段无效，如何隐藏Bootstrap模式窗口

1 个答案: