HTML5 form doğrulamasını jQuery aracılığıyla göndermeden zorlama

Benim app bu formu var ve ben AJAX üzerinden göndereceğiz, ancak istemci tarafı doğrulama için HTML5 kullanmak istiyorum. Bu yüzden, belki de jQuery aracılığıyla form doğrulamasını zorlamak istiyorum.

Formu göndermeden doğrulamayı tetiklemek istiyorum. Mümkün mü?

Belirli bir alanın geçerli olup olmadığını kontrol etmek için şunu kullanın:

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

Formun geçerli olup olmadığını kontrol etmek için şunu kullanın:

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

Bazı tarayıcıların (Chrome gibi) sahip olduğu yerel hata mesajlarını görüntülemek istiyorsanız, maalesef bunu yapmanın tek yolu formu şu şekilde göndermektir:

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

Bu yardımcı olur umarım. HTML5 doğrulamasının tüm tarayıcılarda desteklenmediğini unutmayın.

Benim için bu çözümü buldum. Bunun gibi bir javascript işlevini çağırmanız yeterlidir:

action="javascript:myFunction();"

Sonra html5 doğrulama var ... gerçekten basit :-)

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

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

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

from: html5 form doğrulaması

Aşağıdaki kod benim için çalışıyor,

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

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

});

İşte biraz daha temiz olan daha genel bir yol:

Formunuzu şu şekilde oluşturun (hiçbir şey yapmayan kukla bir form olabilir):

<form class="validateDontSubmit">
...

Gerçekten göndermek istemediğiniz tüm formları bağlayın:

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

Şimdi tıkladığınızda formu doğrulamak istediğiniz bir <a>(içinde <form>) olduğunu varsayalım:

$('#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'
});

Burada birkaç not:

• Doğrulamanın gerçekleşmesi için formu göndermeniz gerekmediğini fark ettim - çağrı checkValidity()yeterli (en azından kromda). Diğer kullanıcılar bu teoriyi diğer tarayıcılarda test ederek yorum ekleyebilirse, bu yanıtı güncelleyeceğim.
• Doğrulamayı tetikleyen şeyin içinde olması gerekmez <form>. Bu, genel amaçlı bir çözüme sahip olmanın temiz ve esnek bir yoluydu.

Partiye geç olabilir ama yine de benzer bir sorunu çözmeye çalışırken bu soruyu buldum. Bu sayfadaki hiçbir kod benim için çalışmadığından, bu arada belirtilen şekilde çalışan bir çözüm buldum.

Sorun, DOM'niz tetiklendiğinde otomatik olarak formu yuvarlayacak <form>tek bir <button>öğe içermesidir <button>. AJAX ile oynuyorsanız, muhtemelen varsayılan eylemi önlemeniz gerekir. Ancak bir sorun var: Bunu yaparsanız, temel HTML5 doğrulamasını da önleyeceksiniz. Bu nedenle, yalnızca form geçerliyse bu düğmedeki varsayılanları önlemek iyi bir çağrıdır. Aksi takdirde, HTML5 doğrulaması sizi göndermekten korur. jQuery checkValidity()bu konuda yardımcı olacaktır:

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

Yukarıda açıklanan kod, formu göndermeden temel HTML5 doğrulamasını (tür ve desen eşleşmesi ile) kullanmanızı sağlar.

Javascript / jquery kullanarak "HTML5 doğrulaması" ve HTML formunun doğrulanması olmak üzere iki farklı şeyden bahsediyorsunuz.

HTML5'te "formu" doğrulamak için yerleşik seçenekler bulunur. Javascript / jquery kullanmadan (tarayıcı uygulamasına dayalı olarak) başarısız form gönderimi yapabilen bir alanda "zorunlu" öznitelik kullanmak gibi.

Javascripti / jquery ile böyle bir şey yapabilirsiniz

$('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();
}

Gönder düğmesini kullanmadan gerekli tüm form alanlarını kontrol etmek için aşağıdaki işlevi kullanabilirsiniz.

Denetimlere gerekli özniteliği atamanız gerekir .

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

Bunu başarmak için jQuery gerekmez. Formunuza şunları ekleyin:

onsubmit="return buttonSubmit(this)

veya JavaScript dilinde:

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

Senin içinde buttonSubmitişlevinin (veya whatver diyorsunuz) kullanarak, AJAX kullanarak form gönderebilirsiniz. buttonSubmityalnızca formunuz HTML5'te doğrulanırsa çağrılır.

Bu kimseye yardımcı olursa, işte benim buttonSubmitişlevi:

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

Formlarımdan bazıları birden çok gönderme düğmesi içeriyor, dolayısıyla bu satır if (submitvalue == e.elements[i].value). submitvalueBir tıklama etkinliği kullanmanın değerini ayarladım .

Farklı şeyleri işlemek için birden fazla gönderme düğmesine ihtiyaç duyduğum oldukça karmaşık bir durumum vardı. Örneğin, Kaydet ve Sil.

Temel, aynı zamanda mütevazi olduğu için, normal bir düğme yapamadım. Ama aynı zamanda html5 doğrulamasını kullanmak istedim.

Ayrıca, kullanıcının beklenen varsayılan gönderimi tetiklemek için enter tuşuna basması durumunda gönderme olayı geçersiz kılınmıştır; bu örnekte kaydedin.

Formun hem javascript ile / javascript olmadan hem de html5 doğrulamasıyla hem gönderme hem de tıklama olaylarıyla çalışabilmesi için gösterdiği çabalar.

jsFiddle Demo - Gönderme ve tıklama geçersiz kılmalarıyla HTML5 doğrulaması

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

Javascript'i kullanma uyarısı, kodunuzdaki her tarayıcıyı desteklemeden hata mesajlarını görüntülemek için tarayıcının varsayılan onclick'inin gönderme olayına yayılması gerektiğidir. Aksi takdirde, click olayı event.preventDefault () ile geçersiz kılınırsa veya false döndürülürse, asla tarayıcının gönderme olayına yayılmaz.

Dikkat çeken şey, bazı tarayıcılarda kullanıcı enter tuşuna bastığında form gönderimini tetiklemeyecek, bunun yerine formdaki ilk gönderme düğmesini tetikleyecektir. Bu nedenle tetiklemediğini göstermek için bir console.log ('form gönderme') vardır.

Formu göndermeden yapabilirsiniz.

Örneğin, "arama" kimliğine sahip form gönderme düğmesi diğer formdaysa. Bu gönderme düğmesinde tıklama etkinliğini arayabilir ve bundan sonra ev.preventDefault'u arayabilirsiniz. Benim durumum için B formunu Form A sunumundan doğrularım. Bunun gibi

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

Bu şekilde benim için iyi çalışıyor:

1. İçine onSubmitöznitelik ekleyin form, returndeğere dahil etmeyi unutmayın .

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

2. İşlevi tanımlayın.

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

en iyi cevap değil ama benim için çalışıyor.

Bunun zaten cevaplandığını biliyorum, ama başka bir olası çözümüm var.

Jquery kullanıyorsanız, bunu yapabilirsiniz.

Öncelikle jquery'de birkaç uzantı oluşturun, böylece bunları gerektiği gibi yeniden kullanabilirsiniz.

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

Sonra kullanmak istediğiniz yerde böyle bir şey yapın.

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

Bu , form doğrulama ile yerel HTML 5 hata iletilerini görüntülemek için bana form çalıştı .

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

}


});

Not: RegForm form id.

Referans

Umut birine yardım eder.

Bu, HTML5'in form üzerinde modern JS denetimine sahip olmasına rağmen, herhangi bir form için doğrulama gerçekleştirmesinin oldukça basit bir yoludur. Tek uyarı, gönderme düğmesinin içinde olması gerektiğidir <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...
}

Bence en iyi yaklaşım

form doğrulama için en iyi uygulamayı kullanan jQuery Validation eklentisini kullanacak ve ayrıca iyi bir tarayıcı desteğine sahip olacak. Dolayısıyla, tarayıcı uyumluluğu sorunları hakkında endişelenmenize gerek yoktur.

Ve seçilen formun geçerli olup olmadığını veya seçilen tüm öğelerin formu göndermeden geçerli olup olmadığını kontrol eden jQuery validation valid () işlevini kullanabiliriz .

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

Soruna göre html5 geçerliliği ilk etapta jQuery kullanarak doğrulanabilir olmalıdır ve cevabın çoğunda bu gerçekleşmez ve bunun nedeni şu şekildedir:

html5 formunun varsayılan işlevini kullanarak doğrulama yaparken

checkValidity();// returns true/false

böyle seçerken jQuery'nin nesne dizisini döndürdüğünü anlamamız gerekir

$("#myForm")

bu nedenle, checkValidity () işlevinin çalışması için ilk dizini belirtmeniz gerekir

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

İşte tam çözüm:

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