Question

我有一个包含2个文本框和1个复选框的表单。我在验证表单时遇到了问题。我的目标是检查用户是否选中了复选框或在文本框中写入。如果用户同时写入文本框，或者选中复选框，则可以继续使用下一个表单。如果没有，则应出现一个对话框。我该如何做到这一点？

我的伪代码：

if (checkBox1.Checked)
{
    //Go to next Form
}
else
{
    if (textBox1.Text == "" || textBox2.Text == "")
    {
        MessageBox.Show("Please fill in the textboxes or mark the checkbox to continue");
    }
    else
    {
        //Go to next Form
    }
}

我的HTML表单

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>

    <script>
    jQuery(document).ready(function()
    {
        jQuery('#continue').on('click', function()
        {
            jQuery('#stepTwoForm').submit();
            return false;
        })

    })
    </script>


</head>

<body>
        <form id="stepTwoForm" action="NextForm.php" method="POST" class="form-horizontal">
              <div class="form-group">
                <label for="Textbox1" class="col-sm-3 control-label">Textbox1</label>
                <div class="col-sm-6">
                  <input name="Textbox1" type="text" class="form-control" id="Textbox1">
                </div>
              </div>
              <div class="form-group">
                <label for="Textbox2" class="col-sm-3 control-label">Textbox2</label>
                <div class="col-sm-6">
                  <input name="Textbox2" type="text" class="form-control" id="Textbox2">
                </div>
              </div>

          <center><input type="checkbox" name="checkboxName" id="checkboxID" value="Bike"> If checked go to next page or else fill out the textboxes</center>
        </form>

    <center><a id="continue" type="button" class="btn btn-primary btn-md" href="#">Continue</a></center>

</body>
</html>

Answer 1

如果您在提交之前使用jquery验证表单，那么您可以告知用户错误。看看下面的代码，这应该让你朝着正确的方向前进，如果没有选中复选框并且输入为空，它将向用户提供警报，否则它将提交表格。

<script>
  $(document).ready(function(){
    $( '#continue' ).on( 'click', function()
    {
        if( $( '#checkboxID' ).is( ':checked' ) )
      {
        $( '#stepTwoForm' ).submit();
      }
      else
      {
        if( $( 'input[name=Textbox1]' ).val() == '' || $( 'input[name=Textbox2]' ).val() == '' )
        {
          alert( 'Please fill in the textboxes or mark the checkbox to continue' );
        }
        else
        {
          $( '#stepTwoForm' ).submit();
        }
      }
    })
  })
</script>

工作示例 - https://jsfiddle.net/Lhuaz0fn/

通过检查文本框和复选框，通过验证转到下一个表单

1 个答案: