Html.BeginForm utilizzando onSubmit per convalidare

Question

sto cercando di presentare una mia forma, ma ho aggiunto un po 'di jQuery per la convalida che funziona:

$(function validateForm() { 
    $("#newMonoReading").on('focusout', function() { 
     var str = ""; 

     var initialMonoReading = $('#InitialMonoReading').val(); 
     var newMonoReading = $('#newMonoReading').val() 
     if (~~newMonoReading < ~~initialMonoReading) { 
      $('#MonoErrorMessage').text("New Mono Readings must be MORE than existing"); 
      $('#MonoErrorMessage').show(); 
      return false; 


     } else { 
      $('#MonoErrorMessage').hide(); 

     } 
    }); 
}); 

Ma il problema è sul pulsante di invio

<input type="submit" value="Submit" class="btn btn-primary"> 

Se si verifica un errore, il pulsante di invio funziona ancora, ho bisogno che non mostri messaggi di errore e poi invii, ma ho provato a utilizzare onsubmit per il modulo ma non funziona, viene comunque inviato anche se il valore è inferiore e l'errore messaggio sta mostrando

Questo è l'html.BeginForm. penso che l'errore potrebbe essere qui. non sono davvero sicuro.

  <div class="modal-body"> 
     @using (Html.BeginForm("Save", "ReadingsEntry", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "validateForm()" })) 
     { 

Tutte le idee

Answer 1

Se ho ragione, poi su invia si desidera convalidare il modulo con la funzione jQuery .. e se vailidation è passato poi vuoi che il sottomesso venga interrotto, altrimenti vuoi che l'invio sia cancellato .. Se ho torto, per favore clerifica la tua domanda un po 'di più.

Altrimenti è possibile modificare la funzione di jQuery per -

$(function validateForm(event) { 
    event = event || window.event || event.srcElement; 
    var initialMonoReading = $('#InitialMonoReading').val(); 
    var newMonoReading = $('#newMonoReading').val() 
    if (~~newMonoReading < ~~initialMonoReading) { 
     $('#MonoErrorMessage').text("New Mono Readings must be MORE than existing"); 
     $('#MonoErrorMessage').show(); 
     event.preventDefault(); 
    } 
    else { 
     $('#MonoErrorMessage').hide(); 
    } 
}); 

e durante la creazione di markup, l'uso seguente line-

@using (Html.BeginForm("Save", "ReadingsEntry", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "validateForm(event)" })) 

Anche se, non ho controllato si codice, ma questo dovrebbe lavoro .. si prega di provare e fateci sapere ..

Answer 2

provare a utilizzare in questo modo:

<div class="modal-body"> 
     @using (Html.BeginForm("Save", "ReadingsEntry", FormMethod.Post, new { enctype = "multipart/form-data"})) 
     { 

<input type="submit" value="Submit" onclick="return validateForm()" class="btn btn-primary"> 

Answer 3

Questo ha funzionato per me

function validateForm() { 
    if ($('#newMonoReading').val() == 'bla bla bla') { 
     alert('bla bla bla'); 
     return false; 
    } 

    else { 
     form1.submit(); 
    } 


@using (Html.BeginForm("action", "controller", FormMethod.Post, new { @id = "form1"})) 
{ 
<input type="text" id="newMonoReading"><br> 
<input type="submit" value="Submit" onclick = "return validateForm();" class="btn btn-primary"> 
} 

Answer 4

Questo è ciò che ha funzionato per me,

@using (Html.BeginForm("Tag", "Translations", FormMethod.Get, new { enctype = "multipart/form-data", onsubmit = "return validateTagInput()" })) 

JQuery,

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script> 
    function validateTagInput() 
     { 
     //do validation 
     if (x,y,z) 
     { 
     return true; //let page be submitted 
     } 
     else { 
     return false; //do not let submission go through 
      } 
     } 
</script>