Question

我必须在所有具有required="required"属性的输入字段时提交表单。

我的表格：

<form method="post" action="/actions.php/" data-js-validate="true" data-js-highlight-state-msg="true" data-js-show-valid-msg="true">
    <input type="text" name="amount[]" required="required" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" />
    <input type="text" name="grade[]" required="required" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" />
    <button class="btn" type="submit" name="confirm" >Pay Now</button>
</form>

我想在显示消息框后提交表单。如你所见，我的表单动作是另一个php文件。所以我阻止默认行为，然后如果单击继续按钮发送表单。我为此使用了靴子。

Bootstrap模型：

<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">Proccess Payment</h4>
            </div>
            <div class="modal-body">
                <p>
                "Your about to make a online payment. Click 'Edit' to review the data before proceeding or click 'Continue' to confirm the details for payment."
                </p>
                <button class="btn btn-default" data-dismiss="modal">Edit</button>
                <button class="btn btn-primary" id="continuebtn">Continue</button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

和jQuery：

<script>
    jQuery( document ).ready(function() {
    /* for boot strap model */
        jQuery('#payBtn').on('click',function(e){
            e.preventDefault();
            jQuery('#myModal').modal('toggle');

        });

        jQuery('#continuebtn').on('click',function(){
            jQuery('form').submit();
        });
    });
</script>

但如果我单击按钮Continue按钮，则会发送此消息。无论输入字段是否填充..

我想要的是只有在填充文件required="required"时才应提交表单。

我该怎么做？

Answer 1

首先在提交按钮上添加一个名为“payBtn”的id属性。

之后

用您当前的js替换以下jquery

<script>
jQuery( document ).ready(function() {
    jQuery('#payBtn').on('click',function(e){
        e.preventDefault();
        var empty = false;
        jQuery('input:text').each(function(){
            if(jQuery(this).val()==''){
                console.log('error');
                empty = false;
            } else empty = true;
        });
        if(empty)
            jQuery('#myModal').modal('toggle');
        else
            console.log('your error message');
    }); 

    jQuery('#continuebtn').on('click',function(){
        jQuery('form').submit();
    });
});

Answer 2

    $('form').on('submit', function(event){
      event.preventDefault();
      event.stopPropagination();
      var check = true;
      $('*[requiered]').each(function(){
         // run other filter functions here
         if($(this).val().trim().length < 1){
           check = false;
         } 
´     });  
      if(!check){
        alert('something is missing');
      } else {
        // all is fine
        $(this).submit();
      }
    })

这样的事情？

Answer 3

您可以在jQuery函数中添加一些条件：

  jQuery('#continuebtn').on('click',function(){
         if($("#myInput").val() != "")
         {
            jQuery('form').submit();
         }
    });

这样，您就可以为每个输入执行特定操作。

但还有另一种方法是检查所有包含“必需”属性的输入

var missingFieldCounter = 0; // we count the number of field missing
jQuery('#continuebtn').on('click',function(){
    $(':input[required]').each(function() // for each input that contains "required" attribute
    {
        if($(this).val() == "") // if the required input is not filled
        {
            missingFieldCounter+=1; 
            $(this).after("<b>You have to fill this field</b>"); // we print a message after the input
        }
    });

    if(missingFieldCounter == 0) // if the counter has never been incremented (every field is filled)
    {
        jQuery('form').submit();
    }
});

See the fiddle Here

Answer 4

这是一个工作样本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test-Projekt</title>
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=10">
    <link href="favicon.ico" rel="Shortcut icon">
</head>
<body>
    <form action="" method="GET">
        <div>
            <label>required input</label>
        </div>
        <div>
            <input type="text" name="myInput" required>
        </div>
        <div>
            <button id="btn_submit" type="submit">Submit Form</button>
        </div>
    </form>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous">
</script>
<script type="application/javascript">
    $(document).ready(function(){
        $('#btn_submit').on('click', function(event){
            event.preventDefault();
            event.stopPropagation();
            var formElement = $(this).parents('form');
            formElement.find('input:required').each(function(){
                var minLength = 1;
                var value = $(this).val();
                var checked = true;
                if(value.trim().length < minLength) {
                    console.log('length is not ok');
                    checked = false;
                }

                if(!checked){
                    console.log($(this).attr('name') + ' is not correctly filled!');
                } else {
                    console.log('all is ok');
                    formElement.submit();
                }
            });
        });
    });
</script>
</html>

顺便说一下。如果您使用html 5并且您没有做任何事情，那么现有浏览器将自动检查所有带有所需属性的输入。这是因为我没有使用它，如果不必过滤特殊字符的字段。

Answer 5

如果$('#formid').submit()没有像我们点击提交按钮那样显示缺少的字段，那么如何创建隐藏的提交按钮并模拟点击呢？

如果您在表单中放入以下内容：

<input id="send" type="submit" style="display: none"/>

现在是JavaScript部分：

    $(document).ready(function(){
        $('#continuebtn').on('click', function(event){
            $('#send').trigger('click');
        })
    });

您会看到，当您点击#continuebtn时，您将获得缺少的字段。

浏览器已经知道缺少字段的位置。重用它而不是编写jquery调用并重新发明轮子会更有效率。

我认为这不是最好的解决方案，但只需很少修改我们的代码库即可。

仅当使用bootstrap填充所有必需的attr字段时，如何提交表单？

5 个答案: