javascript - 表单只能通过“提交”按钮提交

Question

我有一个表格。我希望提交表单的唯一方法是使用提交按钮。我想确保 ios 上的 Enter 按钮或 go 按钮没有用于提交表单。

Answer 1

HTML

<input type="button">不会使用移动设备上的 Enter 键或“go”按钮触发自动提交。

<form action="my-handler.php" method="POST" id="my_form">

    <label for="some_input">Input 1
    <input name="some_input" id="some_input" type="text">
    </label>

    <label for="another_input">Input 2
    <input name="another_input" id="another_input" type="text">
    </label>

    <input type="button" value="Submit Form" id="submit_button">

</form>

JavaScript

<script type="text/javascript">

    // Stop the form from submitting if enter is pressed
    // or the 'go' button is pressed on mobile
    $( '#my_form' ).submit(function(e) {

        e.preventDefault();

    });

    // Submit the form when button is clicked
    $( document ).on( 'click', '#submit_button', function() {

        $( '#my_form' ).submit();

    });

</script>

结论

您可能不应该过多关注阻止在移动设备上使用 Enter 或“go”提交表单，因为这会降低用户体验。我想您这样做是因为在表单填写完成之前有一些事情很容易触发提交。也许，在这种情况下，表单验证对您来说是一个更好的 friend ，如下所示:

<script type="text/javascript">

    $( '#my_form' ).submit( function(e) {

        e.preventDefault(); // Don't let the form submit yet

        if( true == validateForm() ) {
            $( '#my_form' ).submit(); // Submit the form
        } else { 
            // Show error output
        }

    });

    // Validation function - returns true or false
    function validateForm() {
        // Do all your field validation and return
        return true;
    }

</script>