Wie erzwingt man die Validierung eines HTML-Formulars, ohne es mit jQuery abzuschicken?

Question

Ich habe dieses Formular in meiner Anwendung und ich werde es über AJAX übermitteln, aber ich möchte HTML für die Client-seitige Validierung verwenden. Ich möchte also in der Lage sein, die Formularvalidierung zu erzwingen, vielleicht über jQuery.

Ich möchte die Validierung auslösen, ohne das Formular abzuschicken. Ist das möglich?

Answer 1

Dieser Weg funktioniert für mich gut:

1. hinzufügen onSubmit Attribut in Ihrem form Vergessen Sie nicht, Folgendes hinzuzufügen return im Wert.

   <form id='frm-contact' method='POST' action='' onSubmit="return contact()">

2. Definieren Sie die Funktion.

   function contact(params) {
       $.ajax({
           url: 'sendmail.php',
           type: "POST",
           dataType: "json",
           timeout: 5000,
           data: { params:params },
           success: function (data, textStatus, jqXHR) {
               // callback
           },
           error: function(jqXHR, textStatus, errorThrown) {
               console.log(jqXHR.responseText);
           }
       });
   
       return false;
   }

Answer 2

$(document).on("submit", false);

submitButton.click(function(e) {
    if (form.checkValidity()) {
        form.submit();
    }
});

Answer 3

Sie können dies tun, ohne das Formular abzuschicken.

Zum Beispiel, wenn die Schaltfläche "Suchen" im anderen Formular vorhanden ist. Sie können das Click-Ereignis für diese Schaltfläche aufrufen und danach ev.preventDefault aufrufen. In meinem Fall validiere ich Formular B aus der Übermittlung von Formular A. Etwa so

function validateFormB(ev){ // DOM Event object
  //search is in Form A
  $("#search").click();
  ev.preventDefault();
  //Form B validation from here on
}

Answer 4

Ich hatte eine ziemlich komplexe Situation, in der ich mehrere Übermittlungsschaltflächen benötigte, um verschiedene Dinge zu verarbeiten. Zum Beispiel, Speichern und Löschen.

Die Grundlage dafür war, dass es auch unauffällig war, so dass ich es nicht einfach zu einer normalen Schaltfläche machen konnte. Wollte aber auch die html5-Validierung nutzen.

Außerdem wurde das Submit-Ereignis überschrieben, falls der Benutzer die Eingabetaste drückt, um die erwartete Standardübermittlung auszulösen; in diesem Beispiel Speichern.

Hier ist der Aufwand für die Verarbeitung des Formulars, um noch mit/ohne Javascript und mit html5-Validierung zu arbeiten, sowohl mit Submit- als auch mit Click-Events.

jsFiddle Demo - HTML5-Validierung mit Submit- und Click-Overrides

xHTML

<form>
    <input type="text" required="required" value="" placeholder="test" />
    <button type="submit" name="save">Save</button>
    <button type="submit" name="delete">Delete</button>
</form>

JavaScript

//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
    var isValid = null;
    var form = $('form');
    var submitButton = form.find('button[type="submit"]')
    var saveButton = submitButton.filter('[name="save"]');
    var deleteButton = submitButton.filter('[name="delete"]');

    //submit form behavior
    var submitForm = function(e){
        console.log('form submit');
        //prevent form from submitting valid or invalid
        e.preventDefault();
        //user clicked and the form was not valid
        if(isValid === false){
            isValid = null;
            return false;
        }
        //user pressed enter, process as if they clicked save instead
        saveButton.trigger('click');
    };

    //override submit button behavior
    var submitClick = function(e){
        //Test form validitiy (HTML5) and store it in a global variable so both functions can use it
        isValid = form[0].checkValidity();
        if(false === isValid){
            //allow the browser's default submit event behavior 
            return true;
        }
        //prevent default behavior
        e.preventDefault();
        //additional processing - $.ajax() etc
        //.........
        alert('Success');
    };

    //override submit form event
    form.submit(submitForm);

    //override submit button click event
    submitButton.click(submitClick);
})(jQuery);

Der Nachteil bei der Verwendung von Javascript besteht darin, dass das Standard-Onclick-Ereignis des Browsers auf das Submit-Ereignis übertragen werden MUSS, damit die Fehlermeldungen angezeigt werden können, ohne dass jeder Browser in Ihrem Code unterstützt wird. Andernfalls, wenn das Click-Ereignis mit event.preventDefault() überschrieben wird oder false zurückgegeben wird, wird es sich nie auf das Submit-Ereignis des Browsers übertragen.

Es ist darauf hinzuweisen, dass in einigen Browsern das Absenden des Formulars nicht ausgelöst wird, wenn der Benutzer die Eingabetaste drückt, sondern erst, wenn die erste Schaltfläche im Formular gedrückt wird. Daher gibt es eine console.log('form submit') zu zeigen, dass es nicht auslösen.

Answer 5

Ich weiß, dass diese Frage bereits beantwortet wurde, aber ich habe eine andere mögliche Lösung.

Wenn Sie Jquery verwenden, können Sie dies tun.

Erstellen Sie zunächst ein paar Erweiterungen für Jquery, damit Sie diese bei Bedarf wiederverwenden können.

$.extend({
    bypassDefaultSubmit: function (formName, newSubmitMethod) {
        $('#'+formName).submit(function (event) {
            newSubmitMethod();
            event.preventDefault();
        }
    }
});

Als Nächstes machen Sie etwas Ähnliches an der Stelle, an der Sie es verwenden wollen.

<script type="text/javascript">
    /*if you want to validate the form on a submit call, 
      and you never want the form to be submitted via
      a normal submit operation, or maybe you want handle it.
    */
    $(function () {
        $.bypassDefaultSubmit('form1', submit);
    });
    function submit(){ 
        //do something, or nothing if you just want the validation
    }

</script>