Question

我在我的应用程序中有这个表单，我将通过AJAX提交，但我想使用HTML5进行客户端验证。所以我希望能够通过jQuery强制进行表单验证。

我想在不提交表单的情况下触发验证。有可能吗？

Answer 1

要检查某个字段是否有效，请使用：

$('#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验证。

Answer 2

我发现这个解决方案适合我。只需调用这样的javascript函数：

action="javascript:myFunction();"

然后你有html5验证......非常简单： - ）

Answer 3

这是一种比较清洁的更通用的方法：

像这样创建你的表单（可以是一个什么都不做的虚拟表单）：

<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()的调用就足够了（至少在chrome中）。如果其他人可以在其他浏览器上添加测试这个理论的评论，我会更新这个答案。
触发验证的事情不必在<form>范围内。这只是一种干净而灵活的方式来获得通用解决方案..

Answer 4

可能迟到了派对，但不知怎的，我在尝试解决类似问题时发现了这个问题。由于此页面的代码没有为我工作，同时我提出了按指定的方式工作的解决方案。

问题是当您的<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验证（具有类型和模式匹配）而无需提交表单。

Answer 5

你说的是两个不同的东西“HTML5验证”和使用javascript / jquery验证HTML表单。

HTML5“具有”用于验证表单的内置选项。比如在字段上使用“required”属性，这可能（基于浏览器实现）在不使用javascript / jquery的情况下提交表单失败。

使用javascrip / jquery你可以做这样的事情

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

Answer 6

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

Answer 7

你不需要jQuery来实现这一点。在您的表单中添加：

onsubmit="return buttonSubmit(this)

或在JavaScript中：

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

在您的buttonSubmit功能（或您所称的任何功能）中，您可以使用AJAX提交表单。只有在HTML5中验证您的表单时才会调用buttonSubmit。

如果这对任何人有帮助，这是我的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的值。

Answer 8

您可以在不提交表单的情况下执行此操作。

例如，如果ID为“search”的表单提交按钮是另一种形式。您可以在该提交按钮上调用click事件，然后调用ev.preventDefault。对于我的情况，我从表格A提交中验证表格B. 喜欢这个

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

Answer 9

要在不使用提交按钮的情况下检查表单的所有必填字段，您可以使用以下功能。

您必须为控件分配必需属性。

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

Answer 10

我有一个相当复杂的情况，我需要多个提交按钮来处理不同的事情。例如，保存并删除。

基础是它也不引人注目，所以我不能把它做成一个普通的按钮。但也想利用html5验证。

如果用户按Enter键以触发预期的默认提交，则覆盖提交事件;在这个例子中保存。

以下是使用/不使用javascript和html5验证处理表单的工作，包括提交和点击事件。

<强> jsFiddle Demo - HTML5 validation with submit and 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);

使用Javascript的警告是浏览器的默认onclick必须传播到提交事件必须发生才能显示错误消息而不支持代码中的每个浏览器。否则，如果使用event.preventDefault（）覆盖click事件或返回false，它将永远不会传播到浏览器的提交事件。

需要指出的是，在某些浏览器中，当用户按Enter键时不会触发表单提交，而是会触发表单中的第一个提交按钮。因此，有一个console.log（'form submit'）来表明它不会触发。

Answer 11

这是让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...
}

Answer 12

下面为我工作，

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

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

});

Answer 13

这种方式对我来说很好：

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

Answer 14

这使我能够通过表单验证显示原生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。

Reference

希望帮助某人。

Answer 15

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

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

Answer 16

我知道这已经得到了解答，但我有另一种可能的解决方案。

如果使用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>

Answer 17

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

Answer 18

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

Answer 19

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

Answer 20

我认为最好的方法

将使用jQuery Validation插件，该插件使用最佳做法进行表单验证，并且还具有良好的浏览器支持。因此，您无需担心浏览器兼容性问题。

我们可以使用jQuery验证valid()函数，该函数在不提交表单的情况下检查所选表单是否有效或所有所选元素是否有效。

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

Answer 21

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

不是最好的答案，但对我有用。

Answer 22

根据问题html5的有效性应该首先使用jQuery进行验证，并且在大多数答案中这没有发生，原因如下：

使用html5表单的默认功能进行验证

checkValidity();// returns true/false

我们需要了解jQuery在选择这样的对象时会返回对象数组

$("#myForm")

因此，您需要指定第一个索引以使checkValidity（）函数起作用

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

这是完整的解决方案：

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

如何在不通过jQuery提交的情况下强制执行html5表单验证

22 个答案: