Cara memaksa validasi formulir html5 tanpa mengirimkannya melalui jQuery

Saya memiliki formulir ini di aplikasi saya dan saya akan mengirimkannya melalui AJAX, tetapi saya ingin menggunakan HTML5 untuk validasi sisi klien. Jadi saya ingin dapat memaksa validasi formulir, mungkin melalui jQuery.

Saya ingin memicu validasi tanpa mengirimkan formulir. Apa itu mungkin?

Untuk memeriksa apakah bidang tertentu valid, gunakan:

$('#myField')[0].checkValidity(); // returns true/false

Untuk memeriksa apakah formulir itu valid, gunakan:

$('#myForm')[0].checkValidity(); // returns true/false

Jika Anda ingin menampilkan pesan kesalahan asli yang dimiliki beberapa browser (seperti Chrome), sayangnya satu-satunya cara untuk melakukannya adalah dengan mengirimkan formulir, seperti ini:

var $myForm = $('#myForm');

if(! $myForm[0].checkValidity()) {
  // If the form is invalid, submit it. The form won't actually submit;
  // this will just cause the browser to display the native HTML5 error messages.
  $myForm.find(':submit').click();
}

Semoga ini membantu. Ingatlah bahwa validasi HTML5 tidak didukung di semua browser.

Saya menemukan solusi ini bekerja untuk saya. Panggil saja fungsi javascript seperti ini:

action="javascript:myFunction();"

Maka Anda memiliki validasi html5 ... sangat sederhana :-)

    if $("form")[0].checkValidity()
      $.ajax(
        url: "url"
        type: "post"
        data: {

        }
        dataType: "json"
        success: (data) ->

      )
    else
      #important
      $("form")[0].reportValidity()

dari: validasi formulir html5

kode di bawah ini berfungsi untuk saya,

$("#btn").click(function () {

    if ($("#frm")[0].checkValidity())
        alert('sucess');
    else
        //Validate Form
        $("#frm")[0].reportValidity()

});

Berikut ini adalah cara yang lebih umum yang sedikit lebih bersih:

Buat formulir Anda seperti ini (bisa berupa bentuk dummy yang tidak melakukan apa-apa):

<form class="validateDontSubmit">
...

Ikat semua formulir yang tidak ingin Anda kirim:

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

Sekarang katakanlah Anda memiliki <a>(di dalam <form>) yang di klik Anda ingin memvalidasi formulir:

$('#myLink').click(function(e){
  //Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
  //has .validateDontSubmit class
  var $theForm = $(this).closest('form');
  //Some browsers don't implement checkValidity
  if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
     return;
  }

  //if you've gotten here - play on playa'
});

Beberapa catatan di sini:

• Saya perhatikan bahwa Anda tidak harus benar-benar mengirimkan formulir untuk validasi - panggilan ke checkValidity()sudah cukup (setidaknya dalam chrome). Jika orang lain dapat menambahkan komentar dengan menguji teori ini di browser lain saya akan memperbarui jawaban ini.
• Hal yang memicu validasi tidak harus berada di dalam <form>. Ini hanya cara yang bersih dan fleksibel untuk memiliki solusi tujuan umum ..

Mungkin terlambat ke pesta tetapi entah bagaimana saya menemukan pertanyaan ini ketika mencoba untuk menyelesaikan masalah yang sama. Karena tidak ada kode dari halaman ini yang berfungsi untuk saya, sementara itu saya datang dengan solusi yang berfungsi seperti yang ditentukan.

Masalahnya adalah ketika <form>DOM Anda mengandung <button>elemen tunggal , setelah dipecat, itu <button>akan secara otomatis memasukkan formulir. Jika Anda bermain dengan AJAX, Anda mungkin perlu mencegah tindakan default. Tetapi ada yang menarik: Jika Anda hanya melakukannya, Anda juga akan mencegah validasi HTML5 dasar. Oleh karena itu, panggilan yang baik untuk mencegah default pada tombol itu hanya jika formnya valid. Jika tidak, validasi HTML5 akan melindungi Anda dari pengiriman. jQuery checkValidity()akan membantu dengan ini:

jQuery:

$(document).ready(function() {
  $('#buttonID').on('click', function(event) {
    var isvalidate = $("#formID")[0].checkValidity();
    if (isvalidate) {
      event.preventDefault();
      // HERE YOU CAN PUT YOUR AJAX CALL
    }
  });
});

Kode yang dijelaskan di atas akan memungkinkan Anda untuk menggunakan validasi HTML5 dasar (dengan jenis dan pencocokan pola) TANPA mengirimkan formulir.

Anda berbicara tentang dua hal berbeda "validasi HTML5" dan validasi formulir HTML menggunakan javascript / jquery.

HTML5 "memiliki" opsi bawaan untuk memvalidasi formulir. Seperti menggunakan atribut "wajib" pada suatu bidang, yang bisa (berdasarkan implementasi browser) gagal pengiriman formulir tanpa menggunakan javascript / jquery.

Dengan javascrip / jquery Anda dapat melakukan sesuatu seperti ini

$('your_form_id').bind('submit', function() {
   // validate your form here
   return (valid) ? true : false;
});

var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
  $('<input type="submit">').hide().appendTo($myForm).click().remove();
}

Untuk memeriksa semua bidang formulir yang diperlukan tanpa menggunakan tombol kirim, Anda dapat menggunakan fungsi di bawah ini.

Anda harus menetapkan atribut yang diperlukan untuk kontrol.

  $("#btnSave").click(function () {
    $(":input[required]").each(function () {                     
        var myForm = $('#form1');
        if (!$myForm[0].checkValidity()) 
          {                
            $(myForm).submit();              
          }
        });
  });

Anda tidak perlu jQuery untuk mencapai ini. Dalam formulir Anda tambahkan:

onsubmit="return buttonSubmit(this)

atau dalam JavaScript:

myform.setAttribute("onsubmit", "return buttonSubmit(this)");

Dalam buttonSubmitfungsi Anda (atau apa pun Anda menyebutnya), Anda dapat mengirimkan formulir menggunakan AJAX. buttonSubmithanya akan dipanggil jika formulir Anda divalidasi dalam HTML5.

Dalam hal ini membantu siapa pun, inilah buttonSubmitfungsi saya :

function buttonSubmit(e)
{
    var ajax;
    var formData = new FormData();
    for (i = 0; i < e.elements.length; i++)
    {
        if (e.elements[i].type == "submit")
        {
            if (submitvalue == e.elements[i].value)
            {
                submit = e.elements[i];
                submit.disabled = true;
            }
        }
        else if (e.elements[i].type == "radio")
        {
            if (e.elements[i].checked)
                formData.append(e.elements[i].name, e.elements[i].value);
        }
        else
            formData.append(e.elements[i].name, e.elements[i].value);
    }
    formData.append("javascript", "javascript");
    var action = e.action;
    status = action.split('/').reverse()[0] + "-status";
    ajax = new XMLHttpRequest();
    ajax.addEventListener("load", manageLoad, false);
    ajax.addEventListener("error", manageError, false);
    ajax.open("POST", action);
    ajax.send(formData);
    return false;
}

Beberapa formulir saya berisi beberapa tombol kirim, karenanya baris ini if (submitvalue == e.elements[i].value). Saya menetapkan nilai submitvaluemenggunakan acara klik.

Saya mengalami situasi yang agak rumit, di mana saya perlu beberapa tombol kirim untuk memproses berbagai hal. Misalnya, Simpan dan Hapus.

Dasarnya adalah itu juga tidak mengganggu, jadi saya tidak bisa menjadikannya tombol biasa. Tetapi juga ingin memanfaatkan validasi HTML5.

Selain itu acara pengiriman ditimpa jika pengguna menekan enter untuk memicu pengiriman default yang diharapkan; dalam contoh ini simpan.

Berikut adalah upaya pemrosesan formulir untuk tetap bekerja dengan / tanpa javascript dan dengan validasi html5, dengan kedua ajukan dan klik acara.

jsFiddle Demo - Validasi HTML5 dengan mengirim dan mengklik penggantian

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

Peringatan untuk menggunakan Javascript adalah bahwa onclick default browser harus menyebar ke acara kirim HARUS terjadi untuk menampilkan pesan kesalahan tanpa mendukung setiap browser dalam kode Anda. Kalau tidak, jika acara klik ditimpa dengan event.preventDefault () atau return false, itu tidak akan menyebar ke acara pengiriman browser.

Hal yang perlu diperhatikan adalah bahwa di beberapa browser tidak akan memicu pengiriman formulir ketika pengguna menekan masuk, melainkan akan memicu tombol kirim pertama dalam formulir. Karenanya ada console.log ('form submit') untuk menunjukkan bahwa itu tidak memicu.

Anda dapat melakukannya tanpa mengirimkan formulir.

Misalnya, jika tombol kirim formulir dengan id "cari" ada di formulir lain. Anda dapat memanggil acara klik pada tombol kirim itu dan memanggil ev.preventDefault setelah itu. Untuk kasus saya, saya memvalidasi formulir B dari pengajuan Formulir A. Seperti ini

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

Cara ini bekerja dengan baik untuk saya:

1. Tambahkan onSubmitatribut di Anda form, jangan lupa sertakan returndalam nilai.

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

2. Tentukan fungsinya.

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

$("#form").submit(function() { $("#saveButton").attr("disabled", true); });

bukan jawaban terbaik tetapi bekerja untuk saya.

Saya tahu ini sudah dijawab, tetapi saya punya solusi lain yang mungkin.

Jika menggunakan jquery, Anda bisa melakukan ini.

Pertama buat beberapa ekstensi di jquery sehingga Anda bisa menolaknya sesuai kebutuhan.

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

Selanjutnya lakukan sesuatu seperti ini di mana Anda ingin menggunakannya.

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

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

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

Ini berfungsi dari saya untuk menampilkan pesan kesalahan HTML 5 asli dengan validasi formulir.

<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>



$('#RegForm').on('submit', function () 
{

if (this.checkValidity() == false) 
{

 // if form is not valid show native error messages 

return false;

}
else
{

 // if form is valid , show please wait message and disable the button

 $("#btnRegister").html("<i class='fa fa-spinner fa-spin'></i> Please Wait...");

 $(this).find(':submit').attr('disabled', 'disabled');

}


});

Catatan: RegForm adalah form id.

Referensi

Semoga membantu seseorang.

Ini adalah cara yang cukup mudah untuk membuat HTML5 melakukan validasi untuk formulir apa pun, sementara masih memiliki kontrol JS modern atas formulir. Satu-satunya peringatan adalah tombol kirim harus di dalam<form> .

html

<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>

js

// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );

function newAcctSubmit()
{
  var myForm = jQuery( "#newUserForm" );

  // html 5 is doing the form validation for us,
  // so no need here (but backend will need to still for security)
  if ( ! myForm[0].checkValidity() )
  {
    // bonk! failed to validate, so return true which lets the
    // browser show native validation messages to the user
    return true;
  }

  // post form with jQuery or whatever you want to do with a valid form!
  var formVars = myForm.serialize();
  etc...
}

Saya pikir pendekatan terbaik

akan menggunakan plugin jQuery Validation yang menggunakan praktik terbaik untuk validasi formulir dan juga memiliki dukungan browser yang baik. Jadi Anda tidak perlu khawatir tentang masalah kompatibilitas browser.

Dan kita dapat menggunakan fungsi validasi jQuery valid () yang memeriksa apakah formulir yang dipilih valid atau apakah semua elemen yang dipilih valid tanpa mengirimkan formulir.

<form id="myform">
   <input type="text" name="name" required>
   <br>
   <button type="button">Validate!</button>
</form>
<script>
  var form = $( "#myform" );
  form.validate();
  $( "button" ).click(function() {
    console.log( "Valid: " + form.valid() );
  });
</script>

Menurut pertanyaan, validitas html5 harus dapat divalidasi dengan menggunakan jQuery pada awalnya dan di sebagian besar jawaban ini tidak terjadi dan alasannya adalah sebagai berikut:

saat memvalidasi menggunakan fungsi default bentuk HTML5

checkValidity();// returns true/false

kita perlu memahami bahwa jQuery mengembalikan array objek, sambil memilih seperti ini

$("#myForm")

Oleh karena itu, Anda perlu menentukan indeks pertama untuk membuat fungsi checkValidity () berfungsi

$('#myForm')[0].checkValidity()

di sini adalah solusi lengkap:

<button type="button" name="button" onclick="saveData()">Save</button>

function saveData()
{
    if($('#myForm')[0].checkValidity()){
        $.ajax({
          type: "POST",
          url: "save.php",
          data: data,
          success: function(resp){console.log("Response: "+resp);}
        });
    }
}