Форум

stavatar@yandex.ru · #1 (**permalink**) 17.11.2019, 14:18

Не работает валидация для 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>

laimas · #2 (**permalink**) 17.11.2019, 14:40

Зачем jQuery подключается дважды - строки 5 и 8?

~~jquery-validation-1.19.1\dist\jquery.validate.js~~ jquery-validation-1.19.1/dist/jquery.validate.js

stavatar@yandex.ru · #3 (**permalink**) 17.11.2019, 14:47

Ой,случайно , видимо.Но проблемы это не исправило

laimas · #4 (**permalink**) 17.11.2019, 16:27

Не странно ли иметь скрытое поле, значение которого непонятно чем заполняется? У вас куча флажков, значения которых можно присвоить скрытому полю. Может быть не батарея флажков, а связанная группа радио кнопок и скрытое поле выбросить?

response:'text',//тип возвращаемого ответа text либо xml - нет такого параметра у ajax в jQuery, есть dataType.

Кстати, зачем оно вообще это поле и проверять если его значение, а под его именем отправляется результат расчета как свойство объекта: 'InputX': x? Зачем вообще вам форма, которую вы не отправляете, а значит и поверка ее полей?

stavatar@yandex.ru · #5 (**permalink**) 17.11.2019, 16:44

Не странно ли иметь скрытое поле, значение которого непонятно чем заполняется? У вас куча флажков, значения которых можно присвоить скрытому полю. Может быть не батарея флажков, а связанная группа радио кнопок и скрытое поле выбросить?
----------------------------------------------------
Это лабораторная.Именно так и должно быть как я сделал.

response:'text',//тип возвращаемого ответа text либо xml - нет такого параметра у ajax в jQuery, есть dataType
---------------------------------------------------
все нормально тут работало и так.Исправление этого изначальную проблему не исправило

laimas · #6 (**permalink**) 17.11.2019, 16:49

Сообщение от stavatar@yandex.ru

Это лабораторная.

Это чушь, а не лаборатория - флажки для выбора множества, а вы из флажков присваиваете одно значение этому полю. А выбор одного из множества, это зависимые кнопки.

И на кой черт вам вообще нужна валидация, если форму вы не отправляете вообще.

laimas · #7 (**permalink**) 17.11.2019, 16:50

Сообщение от stavatar@yandex.ru

все нормально тут работало и так.

Не надо пороть отсебятины, работать оно не будет, просто данный параметр будет игнорироваться.

laimas · #8 (**permalink**) 17.11.2019, 16:58

И не надо тип number заключать в кавычки:

не var R = '1';, а var R = 1;, не R == '-1', а R == -1

а значения полей приводите к числу, иначе при мат. операциях может возникать баг. Или вам нужны именно строки?

stavatar@yandex.ru · #9 (**permalink**) 17.11.2019, 17:27

нет.Форма отправляется спокойно.Проблема лишь в валидации.
Я лишь просто делаю скрытое поле и потом ему присваиваю значение.И потом его значение спокойно вместе со всеми другими данными отправляется

stavatar@yandex.ru · #10 (**permalink**) 17.11.2019, 17:27

Сообщение от laimas

Это чушь, а не лаборатория - флажки для выбора множества, а вы из флажков присваиваете одно значение этому полю. А выбор одного из множества, это зависимые кнопки.

И на кой черт вам вообще нужна валидация, если форму вы не отправляете вообще.

Форма отправляется при нажатии на кнопку.

Форум

Справочник

Discord чат

Курсы javascript