Не работает валидация для 1 из 3 полей формы на JQuery.
Для поля Y все работает, а вот для Х - нет.
Вот весь код сайта.
Фунция валидации в самом конце
<html>
<head>
<title>Лабораторная 2</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="jquery-validation-1.19.1\dist\jquery.validate.js"></script> <
</head>
<style>
body
{
background-color: hsl(190, 76%, 87%);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
align-content: center;
}
div.container
{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
align-content: center;
height: 70%;
border: 3px groove hsl(207, 64%, 48%) ;
}
ItemFlex
{
}
</style>
<body>
<div >
<h1 style="color:#B88909">Проверка попадания точки в график</h1>
<span style="margin-left: 60pt;color:#B88909"> Адамов Степан Сергеевич</span>
<span style="color: #B88909 "> P3210</span>
<br> <span style="margin-left: 150pt" > Вариант - 352</span>
</div>
<div class="container" >
<form target="graphics" method="POST" action="controller" class="ItemFlex Form " id="myform" style="border-right: 3px groove hsl(207, 83%, 75%);margin-left: 100pt;" >
X
<Br><Br>
<input type="checkbox" onclick="changeX(-5)" value="-5">-5
<input type="checkbox" onclick="changeX(-4)" value="-4">-4
<input type="checkbox" onclick="changeX(-3)" value="-3">-3
<input type="checkbox" onclick="changeX(-2)" value="-2">-2
<input type="checkbox" onclick="changeX(-1)" value="-1">-1
<input type="checkbox" onclick="changeX(0)" value="0">0
<input type="checkbox" onclick="changeX(1)" value="1">1
<input type="checkbox" onclick="changeX(2)" value="2">2
<input type="checkbox" onclick="changeX(3)" value="3">3
<input type="hidden" id="InputX" name="InputX" data-location="bottom" value="" />
<input type="hidden" name="Flag" data-location="bottom" value="true" />
<Br>
<label name="LabelX" ></label>
<Br>
<Br>
Y
<Br>
<input type="text" id="InputY" class="Y" oninput="changeInputY()" maxlength="5" size="15" name="InputY" placeholder=" От -5 до 3">
<Br>
<label name="LabelY" ></label>
<Br>
<Br>
R
<Br>
<select id="RR" name="InputR">
<option id="R1" value="1" >1</option>
<option id="R2" value="2" >2</option>
<option id="R3" value="3" >3</option>
<option id="R4" value="4" >4</option>
<option id="R5" value="5" >5</option>
</select>
<Br>
<Br>
<input type="submit" class="formWithValidation" >
</form>
<div class="ItemFlex">
<canvas id="plot" width="300" height="300">
</canvas>
</div>
<iframe id="if" name = "graphics" height="300"></iframe>
</div>
</body>
<script>
function changeInputY()
{
var texts;
document.getElementById("InputY").value=document.getElementById("InputY").value.replace(',','.');
}
function changeR()
{
var selind = document.getElementById("RR").options.selectedIndex;
R= document.getElementById("RR").options[selind].value;
}
function changeX(value)
{
document.getElementById("InputX").value= value;
}
var plot_canvas = document.getElementById("plot");
var plot_context = plot_canvas.getContext("2d");
plot_context.beginPath();
plot_context.arc(150, 150, 100, 0, Math.PI/2);
plot_context.lineTo(150, 150);
plot_context.closePath();
plot_context.rect(50, 100, 100, 50);
plot_context.fillStyle = 'red';
plot_context.fill();
plot_context.beginPath();
plot_context.moveTo(100, 150);
plot_context.lineTo(150, 250);
plot_context.lineTo(150, 150);
plot_context.fillStyle = 'red';
plot_context.stroke();
plot_context.closePath();
plot_context.fillStyle = 'red';
plot_context.fill();
plot_context.beginPath();
//Ox
plot_context.moveTo(30, 150);
plot_context.lineTo(270, 150);
plot_context.lineTo(260, 140);
plot_context.moveTo(270, 150);
plot_context.lineTo(260, 160);
//Oy
plot_context.moveTo(150, 30);
plot_context.lineTo(140, 40);
plot_context.moveTo(150, 30);
plot_context.lineTo(160, 40);
plot_context.moveTo(150, 30);
plot_context.lineTo(150, 270);
plot_context.moveTo(30, 150);
plot_context.closePath();
plot_context.stroke();
<jsp:useBean id="Bean" class="general.BeanComponent" scope="session"/>
xxx=<%=Bean.getCount()%>
var x;
var y;
var R = '1';
document.getElementById('RR').addEventListener("click", changeR, false);
plot_canvas.addEventListener("click", drawPoint, false);
function drawPoint(e)
{
alert(xxx);
// alert(xxx);
$('#results1').hide();
if(R == '-1') {
alert("Выберите какое-нибудь значение R");
} else {
var cell = getCursorPosition(e);
plot_context.beginPath();
plot_context.rect(x, y, 5, 5);
x -= 149;
y -= 148;
y *= -1;
x = x/100*R;
y = y/100*R;
$.ajax(
{
type:'post',//тип запроса: get,post либо head
url:'controller',//url адрес файла обработчика
data:{'InputX': x, 'InputY': y, 'InputR': R,"Flag": false},//параметры запроса
response:'text',//тип возвращаемого ответа text либо xml
error: function (message)
{
console.log(message);
$('#results1').text(message);
alert("Error " + message+ $('#results1').text(message));
},
success:function (data)
{//возвращаый результат от сервера
console.log(data);
data=String(data);
plot_context.fillStyle = 'orange';
plot_context.fill();
data.replace('true', '');
data.replace('false','');
var ifr = document.getElementById('if').contentDocument;
ifr.open();
ifr.writeln(data);
ifr.close();
//$('#results1').text(numy);
/*alert("Correct " + message);
$$('result',$$('result').innerHTML+'<br />'+data);*/
}
});
}
}
function getCursorPosition(e) {
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= plot_canvas.offsetLeft ;
y -= plot_canvas.offsetTop ;
}
$(document).ready(function ()
{
jQuery.validator.addMethod("numb", function()
{
console.log(Number ( document.getElementById("InputY").value) );
if ( Number.isNaN(Number ( document.getElementById("InputY").value) )) return false ;
else return true;
},"");
var form=$('#myform');
form.validate(
{
rules:
{
InputX: {
required: true,
},
InputY: {
numb:true,
required: true ,
max: 3 ,
min: -5,
},
InputR:
{
required: true
}},
messages:
{
InputX: {
required: "Заполните X",
},
InputY:
{
required: "Заполните Y",
numb: " Вы ввели не число",
max: "Число должно быть меньше 3" ,
min: "Число должно быть больше -5",
},
InputR: {
required: "Заполните R",
},
},
errorPlacement: function(error, element)
{
if (element.attr("name") == "InputX") error.insertAfter($("label[name=LabelX]"));
if (element.attr("name") == "InputY") {
error.insertAfter($("label[name=LabelY]"));
}
if (element.attr("name") == "InputR") error.insertAfter($("input[name=InputR]"));
}
});
});
</script>
</html>
