I'm making calculator using Ajax with validator plugin I could make calculator work but cannot implement validator to this... there are 2 issues. Since my HTML code's button type is 'button' validation plugin doesn't work. if I change this to 'submit' it redirect to the other page. Ajax conduct the answer before the validation! I tried beforeSubmit and submitHandler.....maybe I

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

I’m making calculator using Ajax with validator plugin I could make calculator work but cannot implement validator to this… there are 2 issues.

Since my HTML code’s button type is ‘button’ validation plugin doesn’t work. if I change this to ‘submit’ it redirect to the other page.
Ajax conduct the answer before the validation!

I tried beforeSubmit and submitHandler…..maybe I used it wrong?…
what’s wrong with my JavaScript code?… could anyone help me out please? Many thanks!

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

Check that the form is valid by adding a call to jQuery valid() method after 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"
      }
    },
  });
  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>

Advertisement

Answer