clientseitige Validierung in htmlhelper ohne Model Klasse

Question

Ich besuchte verschiedene Links, konnte aber keine gewünschte Antwort finden. Ich verwende kein Modell für diese Ansicht. Bevor ich Daten an den Server sende, möchte ich überprüfen, ob die Texteingabe Null ist oder nicht. Wie kann ich sie validieren?

@{ 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<div class="container"> 
    <h2>Student Information</h2> 
    @using (Html.BeginForm("insert", "Menu", FormMethod.Post, new { id="target"})) 
    { 
     <label>First Name:</label> 
     <input type="text" class="form-control" name="firstname" id="f_name" /> 
     <button type="submit" class="btn btn-success" >Insert</button> 
    } 
</div> 

<script> 
    $(function() { 
     $("#target".submit(function (event) { 
      event.preventDefault(); 
      //return false; 
     }) 
    }) 
</script> 

Answer 1

die Sie interessieren, ich leere Zeichenkette verwenden (‚‘) anstelle von null, da in der Regel leer Textbox sind nur leere Zeichenkette und nicht unbedingt null.

<script> 
$(function() { 
    $('button.btn').unbind(); 
    $('button.btn').click(function() { 

     if($("#f_name").val() == ''){ 
      return false; 
     } 
     return true; 
    }) 
}) 
</script> 

Answer 2

Sie können den Wert mit einer einfachen jQuery Anweisung bekommen -.. $ ("# F_name") val() und dann überprüfen, ob es null $ ist ("# f_name") val() == null

So Ihre komplette Javascript wäre

<script> 
    $(function() { 
     $("#target".submit(function (event) { 
      event.preventDefault(); 
      if($("#f_name").val() == null){ 
       return false; 
      } 
      return true; 
     }) 
    }) 

</script> 

Answer 3

Wenn Sie benutzerdefinierte Skript nicht wollen, für Daten auf Client-Seite Validierung, können Sie jquery.validate.js und jquery.validate.unobstrusive.js verwenden. Dies funktioniert genauso wie die MVC-Validierungsregeln (Diese Validierungslogik wird tatsächlich von MVC selbst in der Ansicht generiert, wenn die clientseitige Validierung aktiviert ist).

Fügen Sie einfach diese drei Skriptdateien in Ihre Seite ein.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.js"></script> 

Oder Sie können aus Ihrem Skript-Ordner in MVC-Anwendung auswählen. Und versuchen, das folgende Attribut in Ihrem Htmlelement zur Validierung hinzuzufügen.

<div class="container"> 
    <h2>Student Information</h2> 
    @using (Html.BeginForm("insert", "Menu", FormMethod.Post, new { id="target"})) 
    { 
     <label>First Name:</label> 
     <input data-val="true" data-val-required="First Name field is required." type="text" class="form-control" name="firstname" id="firstname" /> 

     <span class="field-validation-valid" data-valmsg-for="firstname" data-valmsg-replace="true"></span> 
     <button type="submit" class="btn btn-success" >Insert</button> 
    } 
</div> 

Dies funktioniert genauso wie MVC Validierung innerhalb Ihrer Sicht. Sie können weitere Informationen erhalten, wie JqueryValidate und jqueryunauffällig durch Klicken auf diesen Link zu verwenden: http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html