Не работает валидация для 1 из 3 полей формы
Не работает валидация для 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 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>
|
Зачем jQuery подключается дважды - строки 5 и 8?
|
Ой,случайно , видимо.Но проблемы это не исправило
|
Не странно ли иметь скрытое поле, значение которого непонятно чем заполняется? У вас куча флажков, значения которых можно присвоить скрытому полю. Может быть не батарея флажков, а связанная группа радио кнопок и скрытое поле выбросить?
response:'text',//тип возвращаемого ответа text либо xml - нет такого параметра у ajax в jQuery, есть dataType. Кстати, зачем оно вообще это поле и проверять если его значение, а под его именем отправляется результат расчета как свойство объекта: 'InputX': x? Зачем вообще вам форма, которую вы не отправляете, а значит и поверка ее полей? |
Не странно ли иметь скрытое поле, значение которого непонятно чем заполняется? У вас куча флажков, значения которых можно присвоить скрытому полю. Может быть не батарея флажков, а связанная группа радио кнопок и скрытое поле выбросить?
---------------------------------------------------- Это лабораторная.Именно так и должно быть как я сделал. response:'text',//тип возвращаемого ответа text либо xml - нет такого параметра у ajax в jQuery, есть dataType --------------------------------------------------- все нормально тут работало и так.Исправление этого изначальную проблему не исправило |
Цитата:
И на кой черт вам вообще нужна валидация, если форму вы не отправляете вообще. |
Цитата:
|
И не надо тип number заключать в кавычки:
не var R = '1';, а var R = 1;, не R == '-1', а R == -1 а значения полей приводите к числу, иначе при мат. операциях может возникать баг. Или вам нужны именно строки? |
нет.Форма отправляется спокойно.Проблема лишь в валидации.
Я лишь просто делаю скрытое поле и потом ему присваиваю значение.И потом его значение спокойно вместе со всеми другими данными отправляется |
Цитата:
|
Цитата:
url:'controller',//url адрес файла обработчика data:{InputX: x, InputY: y, InputR: R, Flag: false} здесь полей формы даже и близко нет. А форма имеет тот же адрес запроса, и также отправляется методом POST. И это вы называете нормальной работой? Либо выбрасываете ajax запрос и отправляете форму, либо блокируйте отправление формы и отправляйте асинхронный запрос. Цитата:
input type="checkbox" onclick="changeX(-5)" и так у всех флажков, то есть выбран ли флажок или не выбран скрытое поле получит значение именно этого флажка. Это что за бардак? InputR - это список и он не имеет опции с пустым значением, а значит он обязательно уже будет иметь значение первой опции, а они кроме чисел не имеют других значений. И что тут проверять? У вас единственно поле с ручным вводом, значение которого выгоднее проверить гораздо малой кровью, а не плагином. |
Ну что поясните, что это значит?
Сервер получает постоянно асинхронные запросы каких то расчетов, и также под именами полей формы, и возвращает что-то. А "контрольный выстрел", это отправка самой формы методом "аля-ajax" для чего-то иного. Сервер же распознает, что пришло, по наличию заголовка асинхронного запроса. Так? |
Цитата:
Насчет флажков.Да.. я уже понял.Исправлю |
Цитата:
ajax запрос - нужен для 2ого.Нажатие на график изменяет переменные x,y,r и передает их через ajax запрос на сервер |
Таблица с результатами, это html, зачем в нем data.replace('true', '') и data.replace('false','') не понятно. Это определяет способ выбора, и в обеих случаях можно было задействовать ajax (без iframe). Ну бог с ним, но ведь остальное то к чему. Валидацию можно выбросить с чистой совестью. Элементы выбора либо все списки, либо радио кнопки, либо number, либо range. Единственно, это выбор Y, если он с сотыми и то радио кнопки не пойдут, а number будет утомителен, хотя в нем можно и в ручную набирать. Все поля уже имеют значения по умолчанию.
Здесь только основное:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="container" >
<form id="myform" autocomplete="off">
<div>
<label>X</label>
<input type="range" name="InputX" min="-5" max="3" value="0" /> <output>0</output>
</div>
<div>
<label>Y</label>
<input type="text" class="Y" maxlength="5" name="InputY" placeholder=" От -5 до 3" />
</div>
<div>
<label>R</label>
<input type="range" name="InputR" min="1" max="5" value="1" /> <output>1</output>
</div>
<div>
<input type="radio" name="r" value="1" /> <input type="radio" name="r" value="2" checked="" /> <input type="radio" name="r" value="3" />
</div>
<input type="hidden" name="Flag" value="true" />
</form>
<div class="ItemFlex">
<canvas id="plot" width="300" height="300">
</canvas>
</div>
</div>
<script>
var frm = document.getElementById("myform"),
plot_canvas = document.getElementById("plot"),
plot_context = plot_canvas.getContext("2d");
frm.addEventListener('change', function(e) {
if(e.target.type=="range") e.target.nextElementSibling.value = e.target.value;
console.log(this.r.value) //значение RadioNodeList
});
frm.InputY.addEventListener('input', function(e) {
this.value = this.value.replace(/[^\d\.-]/,'');
});
plot_canvas.addEventListener("click", drawPoint, false);
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();
function drawPoint(e) {
var R = frm.InputR.valueAsNumber, pos = getCursorPosition(e);
plot_context.beginPath();
plot_context.rect(pos.x, pos.y, 5, 5);
pos.x -= 149;
pos.y -= 148;
pos.y *= -1;
pos.x = x/100*R;
pos.y = y/100*R;
console.clear()
console.dir({InputX: pos.x, InputY: pos.y, InputR: R, Flag: false})
}
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 ;
return {x: x, y: y}
}
</script>
</body>
</html>
Радио кнопки в форме для примера, для демонстрации, что получить значение этой группы также легко как и списка. Это со слайдером и текстовым полем, хотя, на мой взгляд, здесь удобнее тип number, в которых ручной ввод разрешить только для Y. В консоли то, что будет передано, ожидаемы ли эти значения не мне судить, а вот на сервере вы их должны проверить, клиенту этого не требуется. |
| Часовой пояс GMT +3, время: 02:11. |