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!
JavaScript
x
85
85
1
<!DOCTYPE html>2
<html>3
<head>4
<link rel="stylesheet" type="text/css" href="ajax.css">5
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>6
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>7
<script src="https://code.jquery.com/jquery-3.5.1.js"8
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="9
crossorigin="anonymous"></script>10
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>11
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>12
</head>13
<body>14
15
<form action="result.php" id="form">16
<div id="input">17
<div id="first_input"><label for="number1">Input one</label>18
<input type="text" id="number1" name="number1" placeholder="input number"></div>19
<div id="second_input"><label for="number2" >Input Two</label>20
<input type="text" id="number2" name="number2" placeholder="input number"></div>21
</div>22
<button type="button" id="plus" class="button" onclick="calculate(this.id)">plus</button>23
<button type="button" id="minus" class="button" onclick="calculate(this.id)">minus</button>24
<button type="button" id="multiply" class="button" onclick="calculate(this.id)">multiply</button>25
<button type="button" id="devide" class="button" onclick="calculate(this.id)">devide</button>26
</form>27
<p id="result"></p>28
29
<script type="text/javascript">30
// validate():31
32
33
$(function(){34
$("#form").validate({35
36
// 체크할 항목들의 룰 설정37
rules: {38
number1: {39
required : true,40
digits : true41
},42
number2: {43
required : true,44
digits : true45
}46
},47
48
messages : {49
number1: {50
required : "this field is mandatory"51
52
},53
number2: {54
required : "this field is mandatory"55
}56
},57
});58
})59
60
if($('#form').valid()) {61
alert('three');62
var This = $(this);63
64
}65
function calculate(buttonType) {66
$.ajax({67
url: "result.php",68
type: "GET",69
async: false,70
data: {71
calType: buttonType,72
number1: $("#number1").val(),73
number2: $("#number2").val(),74
},75
}).done(function(data) {76
$('#result').text(data);77
78
});79
80
}81
</script>82
83
</body>84
</html>85
JavaScript
1
25
25
1
<?php2
3
4
$calType = $_GET['calType'];5
$number1 = $_GET['number1'];6
$number2 = $_GET['number2'];7
$result = 0;8
9
switch ($calType) {10
case "plus":11
$result = $number1 + $number2;12
break;13
case "minus":14
$result = $number1 - $number2;15
break;16
case "devide":17
$result = $number1 / $number2;18
break;19
case "multiply":20
$result = $number1 * $number2;21
break;22
}23
24
echo $result;25
Advertisement
Answer
Check that the form is valid by adding a call to jQuery valid() method after validate():
JavaScript
1
44
44
1
$(function() {2
$("#form").validate({3
// 체크할 항목들의 룰 설정4
rules: {5
number1: {6
required: true,7
digits: true8
},9
number2: {10
required: true,11
digits: true12
}13
},14
15
messages: {16
number1: {17
required: "this field is mandatory"18
19
},20
number2: {21
required: "this field is mandatory"22
}23
},24
});25
return $("#form").valid()26
})27
28
function calculate(buttonType) {29
if ($("#form").valid()) {30
console.log("Valid!");31
$.ajax({32
url: "result.php",33
type: "GET",34
async: false,35
data: {36
calType: buttonType,37
number1: $("#number1").val(),38
number2: $("#number2").val(),39
},40
}).done(function(data) {41
$('#result').text(data);42
});43
}44
}JavaScript
1
15
15
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>2
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>3
<form action="result.php" id="form">4
<div id="input">5
<div id="first_input"><label for="number1">Input one</label>6
<input type="text" id="number1" name="number1" placeholder="input number"></div>7
<div id="second_input"><label for="number2">Input Two</label>8
<input type="text" id="number2" name="number2" placeholder="input number"></div>9
</div>10
<button type="button" id="plus" class="button" onClick="calculate(this.id)">plus</button>11
<button type="button" id="minus" class="button" onClick="calculate(this.id)">minus</button>12
<button type="button" id="multiply" class="button" onClick="calculate(this.id)">multiply</button>13
<button type="button" id="devide" class="button" onClick="calculate(this.id)">devide</button>14
</form>15
<p id="result"></p>