JQuery Validierung mit "Schaltfläche" statt Typ "Senden" für ein Formular

Question

$ ('Selektor'). Validierung() scheint mehr für die Schaltfläche "Eingabe" als die Schaltfläche "Button" gebaut werden. Wie würde ich es mit einem Button-Typ innerhalb des Formulars arbeiten?

@using(Html.BeginForm(new {id="TheForm"})) 
{ 
    // code here 
    <input id="TheButton" type="button"> 
} 

JQuery:

$(document).ready(function() { 
     $("#TheForm").validate({ 
      rules: { 
       "AuditDoc.Title": { 
         required: true 
        } 
      } 
     }); 
     $("#TheButton").click(function() { 

     }); 
}); 

diese Grundidee verwenden, wie würde ich jquery Validate arbeiten mit einem Knopf, anstatt eine Art Schaltfläche einreichen? Ich habe Beispiele gesehen, bei denen JQuery automatisch Fehlermeldungen anzeigt, wenn die Regeln nicht erfüllt werden, wenn der Übergabetyp verwendet wird, aber es scheint nicht mit dem Knopftyp zu funktionieren. Ich würde mich über jeden Hinweis freuen!

Answer 1

$(document).ready(function() { 
     $("#TheForm").validate({ 
      rules: { 
       "AuditDoc.Title": { 
        required: true 
       } 
      } 
     }); 

     $("#TheButton").click(function() { 
      if (!$("#TheForm").validate()) { // Not Valid 
       return false; 
      } else { 
       $("#TheForm").submit() 
      } 
     }); 

     $('#btnReset').live('click', function (e) { 
      //var $validateObj = $('#formId'); 
      //Or 
      var $validateObj = $(this).parents('form'); 

      $validateObj.find("[data-valmsg-summary=true]").removeClass("validation-summary-errors").addClass("validation-summary-valid").find("ul").empty(); 
      $validateObj.find("[data-valmsg-replace]").removeClass("field-validation-error").addClass("field-validation-valid").empty(); 
     }); 
    }); 

Answer 2

Ein hackish Weg könnte sein:

$("#TheButton").click(function() { 
    $("#TheForm").submit() 
}); 

Answer 3

Es funktioniert so ziemlich die gleiche wie wäre es mit einem normalen Eingang, außer es nicht die Methode einreichen unterstützt. preventDefault verhindert, dass die Seite ihre Standardanforderung ausführt. .

$("#TheButton").click(function(event) { 
    event.preventDefault(); //or return false 
    getData(); 
}); 

Answer 4

$(document).ready(function(){ 

    $("#myform").validate(); 
    $("#byuttion").click(function() { 

     if($("#myform").valid()) 
     { 
      $("#myform").submit(); 
     } 
     else 
     { 
      return false; 
     } 

     }); 

});