Как форсировать проверку формы html5, не отправляя ее через jQuery

Question

Как форсировать проверку формы html5, не отправляя ее через jQuery

223

У меня есть эта форма в моем приложении, и я отправлю ее через AJAX, но я хочу использовать HTML5 для проверки на стороне клиента. Поэтому я хочу иметь возможность принудительно выполнить проверку формы, возможно, через jQuery.

Я хочу активировать проверку без отправки формы. Возможно ли это?

razenha 08 авг. 2012, в 14:59

Источник

0

Можете ли вы указать, в какой момент вы хотите проверить форму? Что запускает проверку? Хотите ли вы проверить каждое поле, когда пользователь вводит, вводит / покидает поле, меняет значение?
Peter Pajchl 08 авг. 2012, в 21:12
5

Я хотел бы иметь возможность сделать что-то вроде этого: $ ("# my_form"). TriggerHtml5Validation ()
razenha 08 авг. 2012, в 21:29
0

Эта страница может помочь ссылка
Dan Bray 19 март 2016, в 16:24
0

Вы можете достичь этого без JQuery. Смотрите мое решение.
Dan Bray 19 март 2016, в 20:34

Показать ещё 2 комментария

Теги:

jquery

html5

validation

20 ответов

21

Я нашел это решение работать на меня. Просто вызовите функцию JavaScript следующим образом:

action="javascript:myFunction();"

Тогда у вас есть проверка HTML5... действительно просто :-)

Martin Christensen 06 фев. 2013, в 18:16

3

Это сработало и для меня, и я думаю, что это лучший ответ. Я установил action="javascript:0" на <form> и связанный click событие на <button> для MyFunction() и все работало замечательно. Я держу все JS вне HTML. Затем MyFunction может проверить form.checkValidity() чтобы продолжить.
orad 16 окт. 2013, в 19:20
3

Пример кода всегда полезен.
BJ Patel 19 март 2016, в 17:35
9

Привязка к onsubmit() почти всегда лучше, чем привязка к onclick() кнопки, поскольку существуют другие способы отправки формы. (В частности, нажав клавишу return .)
alttag 11 апр. 2016, в 17:59
0

+1 Это потрясающе. больше не требуется валидация метода javascript, если поле пустое или его адрес электронной почты. Браузер может сделать это для нас! Совместим ли этот кросс-браузер?
Jo E. 15 июнь 2016, в 09:42

Показать ещё 2 комментария

13

Вот более общий способ, который немного чище:

Создайте свою форму как это (может быть фиктивная форма, которая ничего не делает):

<form class="validateDontSubmit">
...

Привязать все формы, которые вы действительно не хотите отправлять:

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

Теперь скажем, что у вас есть <a> (внутри <form>), который при нажатии вы хотите проверить форму:

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

Несколько заметок здесь:

Я заметил, что вам не нужно фактически отправлять форму для проверки - вызов checkValidity() достаточно (по крайней мере, в хроме). Если другие могут добавлять комментарии при тестировании этой теории в других браузерах, я обновлю этот ответ.
Вещь, которая запускает проверку, не должна находиться внутри <form>. Это был просто чистый и гибкий способ решения общего назначения.

rynop 27 фев. 2013, в 18:36

9

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

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

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

от: проверка формы html5

user1575761 15 июль 2015, в 11:39

3

reportValidity поддерживается только в Chrome 40.0
M.M 29 июль 2015, в 22:49
0

Это CoffeeScript.
amphetamachine 21 авг. 2015, в 21:37
0

@MM работал на меня в FF
Bhargav Nanekalva 02 июнь 2017, в 11:15
0

reportValidity теперь поддерживается Firefox начиная с версии 49
Justin 18 окт. 2017, в 17:42

Показать ещё 2 комментария

8

Может опаздывать на вечеринку, но все-таки я нашел этот вопрос, пытаясь решить подобную проблему. Поскольку ни один код с этой страницы не работал у меня, между тем я придумал решение, которое работает как указано.

Проблема заключается в том, что ваш <form> DOM содержит один элемент <button>, после того как он запущен, что <button> будет автоматически удаляться. Если вы играете с AJAX, вам, вероятно, необходимо предотвратить действие по умолчанию. Но есть улов: если вы это сделаете, вы также предотвратите базовую проверку HTML5. Следовательно, это хороший вызов для предотвращения по умолчанию на этой кнопке только в том случае, если форма действительна. В противном случае проверка HTML5 защитит вас от отправки. jQuery checkValidity() поможет с этим:

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

Код, описанный выше, позволит вам использовать базовую проверку HTML5 (с сопоставлением типов и шаблонов) БЕЗ отправки формы.

vzr 13 сен. 2016, в 12:43

5

Вы говорите о двух разных вещах: "проверка HTML5" и валидация HTML-формы с помощью javascript/jquery.

HTML5 имеет встроенные опции для проверки формы. Например, использование "обязательного" атрибута в поле, которое может (на основе реализации браузера) скомпрометировать форму без использования javascript/jquery.

С javascrip/jquery вы можете сделать что-то вроде этого

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

Peter Pajchl 08 авг. 2012, в 14:49

2

Я хочу запустить проверку без отправки формы.
razenha 08 авг. 2012, в 17:38
0

Что касается вашего обновления - я все еще думаю, что это правильное решение. Вы не указали, как вы хотите запустить triggerHtml5Validation() . Приведенный выше код прикрепит событие отправки к вашей форме; при отправке вы перехватываете событие и подтверждаете форму. Если вы никогда не хотите отправлять форму, просто return false; и отправка никогда не произойдет.
Peter Pajchl 08 авг. 2012, в 22:42
7

return (valid) ? true : false === return valid . :)
Davi Koscianski Vidal 30 дек. 2015, в 13:31
1

К сожалению, я добавил 1 + @ davi, потому что сначала думал точно так же. Но это не совсем то же самое, так как просто return valid не возвращает false для нулевых / неопределенных значений. Но это не имеет большого значения, в любом случае ответ был псевдокод, суть в том, что используйте return false, чтобы не отправлять форму ^^
T_D 29 март 2016, в 14:12

Показать ещё 2 комментария

3

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

Rafik malek 21 дек. 2016, в 09:28

3

Для этого вам не нужен jQuery. В вашей форме добавьте:

onsubmit="return buttonSubmit(this)

или в JavaScript:

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

В вашей функции buttonSubmit (или, как вы ее называете) вы можете отправить форму с помощью AJAX. buttonSubmit вызывается только в том случае, если ваша форма проверена в HTML5.

В случае, если это кому-то поможет, вот моя функция buttonSubmit:

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

Некоторые из моих форм содержат несколько кнопок отправки, поэтому это строка if (submitvalue == e.elements[i].value). Я устанавливаю значение submitvalue, используя событие click.

Dan Bray 19 март 2016, в 20:59

2

Вы можете сделать это, не отправив форму.

Например, если кнопка отправки формы с идентификатором "поиск" находится в другой форме. Вы можете вызвать событие click на этой кнопке отправки и после этого вызвать ev.preventDefault. В моем случае я подтверждаю форму B из представления формы A. Как этот

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

zawhtut 14 фев. 2014, в 08:32

2

У меня была довольно сложная ситуация, когда мне нужно несколько кнопок отправки, чтобы обрабатывать разные вещи. Например, "Сохранить и удалить".

Основа заключалась в том, что она также была ненавязчивой, поэтому я не мог просто сделать ее обычной кнопкой. Но также хотел использовать проверку html5.

Кроме того, событие отправки было отменено, если пользователь нажал клавишу ввода, чтобы вызвать ожидаемое представление по умолчанию; в этом примере сохраните.

Вот как мы работаем с обработкой формы, которая все еще работает с/без javascript и с проверкой html5, с моментами отправки и нажатия.

jsFiddle Demo - проверка HTML5 с переопределением отправки и клика

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 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, заключается в том, что он должен распространяться по событию отправки, чтобы он отображал сообщения об ошибках без поддержки каждого браузера в коде. В противном случае, если событие click переопределено event.preventDefault() или возвращает false, оно никогда не будет распространяться на событие отправки браузера.

Следует отметить, что в некоторых браузерах не будет запускаться форма отправки при нажатии пользователем, вместо этого она будет запускать первую кнопку отправки в форме. Следовательно, есть console.log('form submit'), чтобы показать, что он не запускается.

fyrye 10 фев. 2014, в 02:59

0

Мы хорошо знаем, что это можно сделать без jQuery, но OP создал заголовок этой темы: «Как вызвать проверку формы html5 без отправки ее через jQuery», явно предлагая использовать jQuery.
vzr 11 янв. 2017, в 14:59
0

@vzr Мой ответ явно использует jQuery . Он отличается тем, что обрабатывает проверку HTML5 с помощью нескольких кнопок отправки и предотвращает отправку формы AJAX, если она недействительна. По умолчанию используется действие save когда пользователь нажимает клавишу enter на клавиатуре. Что на момент моей публикации ни один из предоставленных ответов не был решением ни для нескольких кнопок отправки, ни для захвата клавиши ввода, чтобы предотвратить передачу ajax.
fyrye 12 янв. 2017, в 15:00

2

Чтобы проверить все необходимые поля формы без кнопки отправки, вы можете использовать функцию ниже.

Вы должны назначить атрибут требуемый для элементов управления.

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

Trusha Soni 04 окт. 2013, в 07:10

1

Это довольно простой способ заставить HTML5 выполнять валидацию для любой формы, но при этом имеет современный JS-контроль над формой. Единственное предостережение - кнопка отправки должна находиться внутри <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...
}

Aaron 14 дек. 2016, в 23:01

1

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

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

Matias Elorriaga 19 дек. 2015, в 06:25

0

$ (document) .on («отправить», false); // этот работал отлично, это то, что я искал :)
Akshay Shrivastav 02 нояб. 2016, в 20:06

1

Я знаю, что это уже ответили, но у меня есть другое возможное решение.

Если вы используете jquery, вы можете сделать это.

Сначала создайте пару расширений на jquery, чтобы вы могли использовать их по мере необходимости.

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

Далее сделайте что-то вроде этого, где вы хотите его использовать.

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

David Thompson 31 июль 2015, в 05:18

0

Этот способ хорошо работает для меня:

Добавьте атрибут onSubmit в form, не забудьте включить return в значение.
```
<form id='frm-contact' method='POST' action='' onSubmit="return contact()">
```

Определите функцию.

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

Jeaf Gilbert 17 сен. 2018, в 07:49

0

<!DOCTYPE html>
<html>

<head>
                <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
                <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
                <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
                <title></title>
                <style>
                                .div{
                                width:100px;
                                height:100px;
                                border:1px solid black;
                                }
                                #div1{
                                width:20px;
                                height:20px;
                                background: red;
                                }
                                #div2{
                                width:20px;
                                height:20px;
                                background: blue;
                                }
                                #div3{
                                width:20px;
                                height:20px;
                                background: black;
                                }
                </style>
                                <script> 
                                var initial="";      
                                function allowDrop(e)
                                {
                                                e.preventDefault();
                                }
                                function drag(e){
                                                e.dataTransfer.setData("div",e.target.id);
                                }
                                function drop(e)
                                {                                              
                                                e.preventDefault();
                                                var data = e.dataTransfer.getData("div");
                                                if(initial=="")
                                                {
                                                initial = $("#"+data);
                                                e.target.appendChild($("#"+data)[0]);
                                                }else{
                                                $("#draghere").append(initial);
                                                e.target.appendChild($("#"+data)[0]);
                                                initial = $("#"+data);
                                                }
                                }
  //                                function drop(e)
  //                               { 
  // e.preventDefault();
  // var data = e.dataTransfer.getData("div");
  // e.target.appendChild($("#"+data)[0]);
  //                                }
                                $(document).ready(function(){

                                });
                </script>
</head>

<body>
                <div class="div" id="draghere" ondragover="allowDrop(event)" ondrop="drop(event)">
                <div class="item" id="div1" draggable="true" ondragstart="drag(event)">
                </div>
        <!--         <div class="item" id="div2" draggable="true" ondragstart="drag(event)">
                </div>
                <div class="item" id="div3" draggable="true" ondragstart="drag(event)">
                </div> -->
                </div>   
                <div class="div" id="draghere1" ondragover="allowDrop(event)" ondrop="drop(event)"></div>  
                <input type="text" name="asfa" id="tt" maxlength="10" onkeypress="return (event.charCode >= 47 && event.charCode <= 57) || event.charCode == 43 || event.charCode == 45" onpaste="return (event.charCode >= 47 && event.charCode <= 57) || event.charCode == 43 || event.charCode == 45">
</body>

</html>

Anonymous 30 май 2018, в 08:38

0

$(document).ready(function () {
    var obj = {};
    $("#click_radio").click(function () {
        //Function to get the dropdown list using AJAX
        $.ajax({
            type: "get",
            url: "json/droplist1.json",
            dataType: "json",
            success: function (res) {
                populateDropDown1(res)
            }
        })
        $.ajax({
            type: "get",
            url: "json/droplist2.json",
            dataType: "json",
            success: function (res) {
                populateDropDown2(res)
            }
        })
        $.ajax({
            type: "get",
            url: "json/droplist3.json",
            dataType: "json",
            success: function (res) {
                populateDropDown3(res)
            }
        })
        //Internal function to populate the dropdown list
        function populateDropDown1(data) {
            $.each(data, function (index, val) {
                $("#list1").append('<option key=' + val.key + '>' + val.value + '</option>');
            });
        }
        function populateDropDown2(data) {
            $.each(data, function (index, val) {
                $("#list2").append('<option key=' + val.key + '>' + val.value + '</option>');
            });
        }
        function populateDropDown3(data) {
            $.each(data, function (index, val) {
                $("#list3").append('<option key=' + val.key + '>' + val.value + '</option>');
            });
        }
        $('#person_form').show();
    })

    $("#submit").click(function (e) {
        e.preventDefault();
        var namefl = 0, numbf = 0;
        var namef = $("#name").val();
        var phnenumb = $("#numb").val();
        var list11 = $("#list1").val();
        var list12 = $("#list2").val();
        var list13 = $("#list3").val();


        localStorage.setItem('name', $("#name").val());
        localStorage.setItem('number', $("#numb").val());
        localStorage.setItem('list11', $("#list1").val());
        localStorage.setItem('list12', $("#list2").val());
        localStorage.setItem('list13', $("#list3").val());
        if (namef.length < 2 || namef.length > 15) {
            $("#nameerror").show();
            namefl = 0;
        }
        else {
            namefl = 1;
            $("#nameerror").hide();
        }
        //    if(phnenumb.length<10 || phnenumb.isNaN()){ 
        //       $("#name").addClass('error');  
        //   }
        //   else{
        //       $("#name").removeClass('error'); 
        //   }
        if (namefl == 1) {
            $("#person_form").load("partials.html");
        }

        $.ajax({
            type: "get",
            dataType: "json",
            url: "json/drag_droplist.json",
            success: function (res) {
                populateSecondPageList(res);
            }
        })


    })
    //populate data in the first list box
    function populateSecondPageList(result) {
        $.each(result, function (index, value) {
            $("#draglist").append('<li draggable="true" ondragstart="drag(event)" id="drag' + index + '" class="list-item"><span class="key">' + value.key + ' </span><span class="value">' + value.value + '</span></li>');
        })

    }

    $(document).on("click", "#submitList", function () {
        var namef = localStorage.getItem('name');
        var numb = localStorage.getItem('number');
        var list1f = localStorage.getItem('list11');
        var list2f = localStorage.getItem('list12');
        var list3f = localStorage.getItem('list13');
        var dropname = localStorage.setItem('drpval', sampleData.value);
        var dropnam = localStorage.getItem('drpval');
        var obj = { namef, numb, list1f, list2f, list3f, dropnam };
        console.log(obj);
        $.ajax({
            type: "POST",
            data: obj,
            dataType: "json",
            url: "https://reqres.in/api/users",
            success: function (result) {

                $("#myModal").modal('show');
                $('#myModal .modal-body').html("<p>" + obj.namef + "</p> <p> " + obj.numb + "</p><p>" + obj.list1f + "</p><p>" + obj.list2f + "</p><p>" + obj.list3f + "</p><p>" + obj.dropnam + "</p>");

            },
            error: function (result) {
                alert('error');
                console.log(result);
            }
        });
    })

});


//drag and drop
var dragleave = "";
var sampleData = {};
function allowDrop(ev) {
    ev.preventDefault();
    ev.target.innerHTML = "";
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    $(".list-unstyled li").css("display", "block");
    ev.preventDefault();
    // console.log(ev.target);
    var data = ev.dataTransfer.getData("text");
    // console.log(document.getElementById(data));
    ev.target.innerHTML = document.getElementById(data).innerHTML;

    $(".list-unstyled #" + data).css("display", "none");
    //console.log($("#"+data).html());  

    if ($("#" + data).html()) {
        sampleData = { "key": $("#" + data + " .key").html(), "value": $("#" + data + " .value").html() };
    }
}

Anonymous 30 май 2018, в 08:18

0

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <link rel="stylesheet" href="assets/css/style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

  <script src="scripts/app.js"></script>
</head>

<body>
    <div class="container">
    <div class="row">
        <label><input type="radio" id="click_radio" value="click">click</label>
    </div>
    <div class="row">
        <div class="col-md-8" id="person_form">
            <form>
                <fieldset>
                    <p><strong>pick your colour</strong></p>
                    <div class="row">
                        <div class="col-md-4 form-group">
                            <label>color</label>
                            <select class="form-control" id="list1"></select>
                        </div>
                        <div class="col-md-4 form-group">
                            <label>sports</label>
                            <select class="form-control" id="list2"></select>
                        </div>
                        <div class="col-md-4 form-group">
                            <label>books</label>
                            <select class="form-control" id="list3"></select>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-6" >
                            <label class="col-md-12">name</label>
                            <input type="text" class="col-md-12 form-control" id="name">
                             <p id="nameerror"> This field is required</p>
                        </div>
                        <div class="col-md-6">
                            <label>phone number</label>
                            <input type="text" class="col-md-12 form-control" id="numb">
                        </div>
                    </div>
                    <div class="row">
                        <button class="btn btn-success pull-right" id="submit" type="submit">go to code</buttn>
                    </div>
                </fieldset>
            </form>

        </div>
        <div class="row second">
              <div class="col-md-12">
                  <div class="row">
                      <div class="col-md-6">
                          <ul id="draglist"  class="list-unstyled">

                          </ul>
                      </div>
                      <div class="col-md-6">
                          <ul id="droplist" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">

                          </ul>
                      </div>
                  </div>
              </div>
              <div class="col-md-12">
                  <div class="row">
                      <div class="col-md-6"></div>
                      <div class="col-md-6">
                          <button class="btn btn-success pull-right" id="submitList">Submit</button>
                      </div>
                  </div>
              </div>
          <div class="modal fade" id="myModal" role="dialog">
              <div class="modal-dialog">
             <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Confirmation</h4>
                  </div>
                  <div class="modal-body">
                    <p>You have successfully completed the application!!!</p>
                  </div>
                  <div class="modal-footer footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>

              </div>
            </div>
          </div>
        <div class="col-md-4 pull-right">
            <h1>Benefits</h1>
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
                <li>item 4</li>
                <li>item 5</li>
            </ul>
        </div>

    </div>

</div>
</body>
</html>

Anonymous 30 май 2018, в 07:49

0

Это сработало для того, чтобы отобразить собственные сообщения об ошибках HTML 5 с проверкой формы.

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

}


});

Примечание. RegForm - это form id.

Ссылка

Надежда помогает кому-то.

stom 19 нояб. 2016, в 11:11

0

Вы должны добавить событие, чтобы включить отключенную кнопку отправки
talsibony 25 окт. 2017, в 13:23

0

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

не лучший ответ, но работает для меня.

Keyrr Perino 22 апр. 2015, в 05:05

Ещё вопросы

Можете ли вы указать, в какой момент вы хотите проверить форму? Что запускает проверку? Хотите ли вы проверить каждое поле, когда пользователь вводит, вводит / покидает поле, меняет значение?
Я хотел бы иметь возможность сделать что-то вроде этого: $ ("# my_form"). TriggerHtml5Validation ()
Эта страница может помочь ссылка
Вы можете достичь этого без JQuery. Смотрите мое решение.
Это сработало и для меня, и я думаю, что это лучший ответ. Я установил action="javascript:0" на <form> и связанный click событие на <button> для MyFunction() и все работало замечательно. Я держу все JS вне HTML. Затем MyFunction может проверить form.checkValidity() чтобы продолжить.
Привязка к onsubmit() почти всегда лучше, чем привязка к onclick() кнопки, поскольку существуют другие способы отправки формы. (В частности, нажав клавишу return .)
+1 Это потрясающе. больше не требуется валидация метода javascript, если поле пустое или его адрес электронной почты. Браузер может сделать это для нас! Совместим ли этот кросс-браузер?
reportValidity поддерживается только в Chrome 40.0
reportValidity теперь поддерживается Firefox начиная с версии 49
Я хочу запустить проверку без отправки формы.
Что касается вашего обновления - я все еще думаю, что это правильное решение. Вы не указали, как вы хотите запустить triggerHtml5Validation() . Приведенный выше код прикрепит событие отправки к вашей форме; при отправке вы перехватываете событие и подтверждаете форму. Если вы никогда не хотите отправлять форму, просто return false; и отправка никогда не произойдет.
К сожалению, я добавил 1 + @ davi, потому что сначала думал точно так же. Но это не совсем то же самое, так как просто return valid не возвращает false для нулевых / неопределенных значений. Но это не имеет большого значения, в любом случае ответ был псевдокод, суть в том, что используйте return false, чтобы не отправлять форму ^^
Мы хорошо знаем, что это можно сделать без jQuery, но OP создал заголовок этой темы: «Как вызвать проверку формы html5 без отправки ее через jQuery», явно предлагая использовать jQuery.
@vzr Мой ответ явно использует jQuery . Он отличается тем, что обрабатывает проверку HTML5 с помощью нескольких кнопок отправки и предотвращает отправку формы AJAX, если она недействительна. По умолчанию используется действие save когда пользователь нажимает клавишу enter на клавиатуре. Что на момент моей публикации ни один из предоставленных ответов не был решением ни для нескольких кнопок отправки, ни для захвата клавиши ввода, чтобы предотвратить передачу ajax.
$ (document) .on («отправить», false); // этот работал отлично, это то, что я искал :)
Вы должны добавить событие, чтобы включить отключенную кнопку отправки

Abraham · Accepted Answer · 2012-08-08T14-58-00.000Z

379

Лучший ответ

Чтобы проверить, действительно ли определенное поле, используйте:

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

Чтобы проверить правильность формы, используйте:

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

Если вы хотите отображать собственные сообщения об ошибках, которые имеют некоторые браузеры (например, Chrome), к сожалению, единственный способ сделать это - отправить форму, например:

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

Надеюсь, это поможет. Имейте в виду, что проверка HTML5 не поддерживается во всех браузерах.

Abraham 08 авг. 2012, в 14:58

0

Нет, я хочу запустить проверку без отправки формы.
razenha 08 авг. 2012, в 17:39
1

Я попробовал ваше решение, но оно все еще отправляет форму при выполнении строки $ myForm.submit ().
Yashpal Singla 29 нояб. 2012, в 06:21
23

Попробуйте заменить $myForm.submit() на $myForm.find(':submit').click()
Abraham 01 дек. 2012, в 17:18
6

Авраам прав. Вы должны фактически нажать кнопку отправки (программно). Вызов $ myForm.submit () не вызовет проверку.
Kevin Tighe 27 март 2013, в 18:06
65

Если в вашей форме нет кнопки отправки, вы можете подделать ее: $('<input type="submit">').hide().appendTo($myForm).click().remove();
philfreo 07 нояб. 2014, в 22:14
0

У меня есть некоторая проверка формы в условии условия if. Пожалуйста, посмотрите здесь: stackoverflow.com/questions/27678487/…
alisa 28 дек. 2014, в 18:30
10

Этот ответ очень полезен из-за подсказки о checkValidity() , но он также имеет опасную ошибку. checkValidity() - это то, что вызывает собственные сообщения об ошибках браузера, а не нажатие кнопки отправки. Если у вас есть прослушиватель событий, который прослушивает нажатие кнопки отправки, вы активируете его, когда выполняете `$ myForm.find (': submit'). Click ()`, который запускается сам и вызывает бесконечную рекурсию.
Bad Request 28 янв. 2015, в 18:02
0

У вас может быть скрытая кнопка submit , которую вы можете использовать исключительно для запуска проверочных сообщений. Это уберет опасную ошибку, отмеченную @kitkat, не так ли?
Parziphal 11 апр. 2015, в 16:01
0

Я не уверен, что это помогает, если кнопка submit скрыта. Имеет прослушиватель события submit что делает его опасным независимо от того, видима кнопка submit или нет. В любом случае, нажатие кнопки «Отправить» не вызывает проверки, поэтому это своего рода спорный вопрос.
Bad Request 13 апр. 2015, в 19:40
1

В моем chrome, dd 2015/07, form.checkValidity () сама по себе не вызывает сообщения об ошибках графического интерфейса. $ form.submit () и $ form.triggerHandler ('submit') не запускают эфир сообщений графического интерфейса. Нажатие на кнопку «Отправить», скрытое или временное, генерирует графический интерфейс. Просто убедитесь, что вы не случайно зациклите проверку самостоятельно.
commonpike 21 июль 2015, в 13:15
0

это работает для ie8?
SuperUberDuper 30 сен. 2015, в 10:31
0

Это может быть достигнуто без JQuery. Смотрите мое решение.
Dan Bray 19 март 2016, в 20:39
0

Вот JS Bin, которая демонстрирует использование и некоторые интересные примеры того, какие должны и не должны быть действительные адреса: jsbin.com/jaxasorevu/edit?js,output
jbobbins 12 май 2016, в 00:25
0

Это сработало для отображения собственных сообщений об ошибках HTML 5 с проверкой формы
stom 19 нояб. 2016, в 10:32
0

Вы человек спасатель жизни! Не знал разницу между click() и submit() . Я люблю тебя очень!
nik_m 30 янв. 2017, в 20:44
0

После проверки формы и отправки формы AJAX хочет взять на себя, я продолжаю получать эту ошибку: «Синхронный XMLHttpRequest в основном потоке устарел». Обход, который я использовал, это 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. $submit_btn.click(submitBtnCheck) } function submitBtnCheck(e){ if ($myForm[0].checkValidity()) { e.preventDefault(); formSubmitCallback(); } }
Olarewaju Doyin 23 март 2017, в 03:47
0

это работает и для HTML?
amit 19 нояб. 2018, в 04:14

Показать ещё 15 комментариев