Formular nicht einreichen, bevor Jquery Validierung ist in Ordnung

Question

Ich bin auf der Suche nach einem Weg, so dass meine FormMethod.Post Does't reichen, bevor jquery Validierung erfolgt ist. Ich habe versucht, indem Sie es so machen, dass der Knopf gerade bei disabled ist, und entfernen Sie dann Deaktivieren auf Keydown, wenn Form in Ordnung ist. Aber das hat nicht funktioniert, und beides ist nicht sicher. Was kann ich tun?

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); 
} 

answere

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

Answer 1

Es gibt eine „onsubm es“Fall, dass Sie den Browser für Sie die Validierung tun Formulareinreichung http://www.w3schools.com/tags/ev_onsubmit.asp

Answer 2

Wenn Sie die Eingaben und Taste setzen in einem Formularelement und verwenden Sie die pattern und required Attribute in Kombination mit dem :invalid Wähler steuern können:

/* 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>