Question

我希望我的表单只有填写完字段才能提交。无论以下submit函数的结果如何，它目前都在提交。

$("#findmusicians").submit(function(e)
{
    if ($('#inputName').val() && $('#inputEmail').val() && $('#inputInstrument').val() && $('#inputFee').val() && $('#message').val() != '')
    {
        alert('success');
    }
    else
    {
        alert('fill in all fields');
    }
});

还有什么可以触发它？

以下是表格：

<form class="form-horizontal" role="form" id="findmusicians">
        <div class="form-group">
            <label for="inputName" class="col-sm-3 control-label">* Name</label>
        <div class="col-md-7">
            <input type="text" name="inputName" class="form-control required" minlength="1" id="inputName">
            <div id="hidden"></div>
        </div>
        </div>
        <div class="form-group">
            <label for="inputEmail" class="col-sm-3 control-label">* Email</label>
        <div class="col-md-7">
            <input type="email" name="inputEmail" class="form-control" id="inputEmail">
        </div>
        </div>
    <div class="form-group">
        <label for="inputPhone" class="col-sm-3 control-label">Telephone</label>
        <div class="col-md-7">
            <input type="text" name="inputTelephone" class="form-control" id="inputTelephone">
        </div>
    </div>
    <div class="form-group">
        <label for="inputInstrument" class="col-sm-3 control-label">* Instrument(s)</label>
        <div class="col-md-7">
            <input type="text" name="inputInstrument" class="form-control" id="inputInstrument">
        </div>
    </div>
    <div class="form-group">
            <label for="inputFee" class="col-sm-3 control-label">* Fee</label>
            <div class="col-md-7">
                <input type="text" name="inputFee" class="form-control" id="inputFee">
            </div>
        </div>
    <div class="form-group">
        <label for="message" class="col-sm-3 control-label">* Message</label>
        <div class="col-md-9">
            <textarea name="message" id="message" class="form-control" rows="3" style="height: 200px"></textarea>
            <span class="help-block" style="text-align: left;">Please include as much information as possible including repertoire, rehearsal/performance times and venues.</span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-3 col-md-offset-3">
            <button id="findmusicians-submit" type="submit" class="btn btn-success">Submit request</button>
        </div>
    </div>
    <div class="col-md-9 col-md-offset-3" style="text-align: left; padding-left: 5px">
        <span id="result" class="text-success"></span>
    </div>
</form>

Answer 1

说明

目前，您的.submit回调中的事件冒泡，基本上发生的是默认提交例程仍然被触发。

您可以通过在回调中调用e.preventDefault ()来阻止此操作，以确保您的事件处理程序是最后一次接收事件。

修改后的SNIPPET

$("#findmusicians").submit(function(e)
{
    if ($('#inputName').val() && $('#inputEmail').val() && $('#inputInstrument').val() && $('#inputFee').val() && $('#message').val() != '')
    {
        alert('success');
    }
    else
    {
        alert('fill in all fields');
        e.preventDefault () // stop the event
    }
});

Answer 2

在alert('fill in all fields');之后，您必须致电preventDafault()停止表单提交事件，或者只需return false; alert('fill in all fields');之后停止表单提交：

$("#findmusicians").submit(function(e)
{
    if ($('#inputName').val() && $('#inputEmail').val() && $('#inputInstrument').val() && $('#inputFee').val() && $('#message').val() != '')
    {
        alert('success');
    }
    else
    {
        alert('fill in all fields');
        e.preventDefault();
    }
});

Answer 3

尝试添加e.preventDefault()以阻止表单提交。

Answer 4

如果您想查看空白字段

，为什么不使用required

<form class="form-horizontal" role="form" id="findmusicians">
    <div class="form-group">
       <label for="inputName" class="col-sm-3 control-label">* Name</label>
       <div class="col-md-7">
          <input type="text" name="inputName" required>
       </div>  
    </div>
    <button type="submit">Submit</button>
</form>

为什么我的表单在我不想要时提交？

4 个答案:

说明

修改后的SNIPPET