使用 Ajax 和 jQuery 验证器插件制作计算器，但 Ajax 在验证前进行提交

Question

我正在使用 Ajax 和验证器插件制作计算器我可以使计算器工作，但无法为此实现验证器... 有 2 个问题。

因为我的 HTML 代码的按钮类型是 'button' 验证插件不起作用。如果我将其更改为 'submit'，它会重定向到另一页。
Ajax在验证之前进行回答！

我试过beforeSubmit和submitHandler.....可能是我用错了？...
我的 JavaScript 代码有什么问题？... 有人可以帮我吗？非常感谢！

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="ajax.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"
            integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
           crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
</head>
<body>

<form action="result.php" id="form">
    <div id="input">
        <div id="first_input"><label for="number1">Input one</label>
        <input type="text" id="number1" name="number1" placeholder="input number"></div>
        <div id="second_input"><label for="number2" >Input Two</label>
        <input type="text" id="number2" name="number2" placeholder="input number"></div>
    </div>
    <button type="button" id="plus" class="button" onclick="calculate(this.id)">plus</button>
    <button type="button" id="minus" class="button" onclick="calculate(this.id)">minus</button>
    <button type="button" id="multiply" class="button" onclick="calculate(this.id)">multiply</button>
    <button type="button" id="devide" class="button" onclick="calculate(this.id)">devide</button>
</form>
<p id="result"></p>

<script type="text/javascript">
//    validate():


    $(function(){
        $("#form").validate({

            // 체크할 항목들의 룰 설정
            rules: {
                number1: {
                    required : true,
                    digits : true
                },
                number2: {
                    required : true,
                    digits : true
                }
            },
         
            messages : {
                number1: {
                    required : "this field is mandatory"

                },
                number2: {
                    required : "this field is mandatory"
                }
            },
        });
    })

    if($('#form').valid()) {
        alert('three');
        var This = $(this);

    }
    function calculate(buttonType) {
        $.ajax({
            url: "result.php",
            type: "GET",
            async: false,
                data: {
                    calType: buttonType,
                    number1: $("#number1").val(),
                    number2: $("#number2").val(),
                },
        }).done(function(data) {
            $('#result').text(data);

        });

    }
</script>

</body>
</html>


<?php


$calType = $_GET['calType'];
$number1 = $_GET['number1'];
$number2 = $_GET['number2'];
$result = 0;

switch ($calType) {
    case "plus":
        $result = $number1 + $number2;
        break;
    case "minus":
        $result = $number1 - $number2;
        break;
    case "devide":
        $result = $number1 / $number2;
        break;
    case "multiply":
        $result = $number1 * $number2;
        break;
}

echo $result;

Answer 1

通过在 validate() 之后添加对 jQuery valid() 方法的调用来检查表单是否有效：

$(function() {
  $("#form").validate({
    // 체크할 항목들의 룰 설정
    rules: {
      number1: {
        required: true,
        digits: true
      },
      number2: {
        required: true,
        digits: true
      }
    },

    messages: {
      number1: {
        required: "this field is mandatory"

      },
      number2: {
        required: "this field is mandatory"
      }
    },
  });
  return $("#form").valid()
})

function calculate(buttonType) {
  if ($("#form").valid()) {
    console.log("Valid!");
    $.ajax({
      url: "result.php",
      type: "GET",
      async: false,
      data: {
        calType: buttonType,
        number1: $("#number1").val(),
        number2: $("#number2").val(),
      },
    }).done(function(data) {
      $('#result').text(data);
    });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<form action="result.php" id="form">
  <div id="input">
    <div id="first_input"><label for="number1">Input one</label>
      <input type="text" id="number1" name="number1" placeholder="input number"></div>
    <div id="second_input"><label for="number2">Input Two</label>
      <input type="text" id="number2" name="number2" placeholder="input number"></div>
  </div>
  <button type="button" id="plus" class="button" onClick="calculate(this.id)">plus</button>
  <button type="button" id="minus" class="button" onClick="calculate(this.id)">minus</button>
  <button type="button" id="multiply" class="button" onClick="calculate(this.id)">multiply</button>
  <button type="button" id="devide" class="button" onClick="calculate(this.id)">devide</button>
</form>
<p id="result"></p>

使用 Ajax 和 jQuery 验证器插件制作计算器，但 Ajax 在验证前进行提交

Making calculator using Ajax with jQuery validator plugin but Ajax conduct submission before the validation

javascript

validation

ajax

calculator