在 jquery validate 可以之前不要提交表单

Question

我正在寻找一种方法，以便我的FormMethod.Post 在完成 jquery 验证之前不提交。我已经尝试过使按钮位于disabled，然后在keydown 上删除禁用，如果表单没问题的话。但这不起作用，也不安全。我能做什么？

HTML

@using (Html.BeginForm("_Kontakt", "Home", FormMethod.Post))
{
<div class="row">
    <div class="col-sm-6">
        <div class="col-sm-12">
            <b>Facebook Url</b>
            <input id="FacebookUrl" name="FacebookUrl" type="text" class="form-control" />
        </div>
        <div class="col-sm-12">
            <b>Steam Url</b>
            <input id="SteamUrl" name="SteamUrl" type="text" class="form-control" />
        </div>

        <div class="col-sm-12">
            <button id="SendBtn" class="btn btn-success pull-right" onclick="return validateUrl();">Send</button>
        </div>
    </div>
</div>
}

Jquery/Javascript

function validateUrl() {
    facebookURL = $("#FacebookUrl").val();
    steamURL = $("#SteamUrl").val();
    var facebook = /^(?:(?:http|https):\/\/)?(?:www.)?facebook.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[?\w\-]*\/)?(?:profile.php\?id=(?=\d.*))?([\w\-]*)?$/;
    var steam = /(?:https?:\/\/)?steamcommunity\.com\/(?:profiles|id)\/[a-zA-Z0-9]+/;
    if (facebook.test(facebookURL)) {
    }
    else {
        alert("Ikke et facebook gyldigt url!");
    }
    if (steam.test(steamURL)) {
    }
    else {
        alert("Ikke et steam gyldigt url!");
    }
    return facebook.test(facebookURL);
    return steam.test(steamURL);
}

回答

return facebook.test(facebookURL) && steam.test(steamURL);

Answer 1

有一个“onsubmit”事件可以让你控制表单提交http://www.w3schools.com/tags/ev_onsubmit.asp

Answer 2

如果您将输入和按钮放在表单元素中，并将pattern 和required 属性与:invalid 选择器结合使用，则浏览器可以为您进行验证：

/* Add the .focused class when the user focuses
an input to only show the error message once */
$("#the-form input").focus(function(){
  this.classList.add("focused");
});

.input-error-message {
  color: red;
}

/* Show elements with the class .input-error-message
if they come after an input with invalid data if the
user isn't typing or if it has not been focused yet */
:invalid:not(:focus).focused + .input-error-message {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <form class="col-sm-6" id="the-form" onsubmit="return isValid()">
        <div class="col-sm-12">
            <b>Facebook Url</b>
            <input id="FacebookUrl" name="FacebookUrl" type="text" class="form-control" pattern="^(?:(?:http|https):\/\/)?(?:www.)?facebook.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[?\w\-]*\/)?(?:profile.php\?id=(?=\d.*))?([\w\-]*)?$" required/>
            <div class="input-error-message" hidden>Ikke et facebook gyldigt url!</div>
        </div>
        <div class="col-sm-12">
            <b>Steam Url</b>
            <input id="SteamUrl" name="SteamUrl" type="text" class="form-control" pattern="(?:https?:\/\/)?steamcommunity\.com\/(?:profiles|id)\/[a-zA-Z0-9]+" required/>
            <div class="input-error-message" hidden>Ikke et steam gyldigt url!</div>
        </div>

        <div class="col-sm-12">
            <button id="SendBtn" class="btn btn-success pull-right">Send</button>
        </div>
    </form>
</div>