Избегайте обхода атрибута maxlength с помощью jQuery

У меня возникли проблемы с попыткой проверить пользователя в обход значения maxlength в текстовом поле, но, похоже, ни одна из моих проверок не работает. Я пытаюсь проверить, может ли пользователь изменить максимальную длину выше нашего первоначального предела или если максимальная длина удалена из элемента.

Это довольно просто сделать, но некоторые пользователи, похоже, так и делают.

Вот мой код:

<form class="forms" action="/checkout" name="ordersubmit" id="shipping" method="post" novalidate="">
    <div class="col-xs-12 col-sm-offset-1 col-sm-11 noPadding">
        <label class="InstructionsBlock" for="Instructions">
            Instructions
        </label>
        <textarea id="Instructions" name="Instructions" maxlength="62" rows="6" cols="50">
        </textarea>
</div>
</form>

    var instructions = $("#Instructions");
    $("form").submit() {
        if (instructions.val(instructions.attr("maxlength")) > 70 || instructions.length) {
        alert("Please limit your instruction to a maximum of 70 characters");
    }
}

Когда форма отправляется, она не проверяется, и решение может быть проще, чем я думал, но я не могу заставить эту работу работать.


jquery textarea maxlength
person Fab    schedule 08.07.2020    source источник
comment
мне непонятно, что вы пытаетесь проверить этим: if (instructions.val($(this).attr(maxlength)) › 70 || инструкциям.length)   -  person Nikki9696    schedule 08.07.2020
comment
Я также отредактировал свой код с помощью html   -  person Fab    schedule 09.07.2020
comment
Я отредактировал свой ответ, чтобы он был более применим к вашему коду.   -  person Nikki9696    schedule 09.07.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вы всегда должны выполнять проверку на стороне сервера. И я не вижу остальной части вашего кода, поэтому я не знаю, что такое $(this). Но вот простой пример того, что, я думаю, вы пытаетесь проверить.

const $instructions = $("#Instructions");
const max = 70;  // for testing; change to 70 or whatever for yours

// check the attribute is present and less than our max and that the value doesn't exceed it
$("form").on("submit", () => {
  let maxlength = parseInt($instructions.attr("maxlength"));
  if (!$instructions.attr("maxlength") ||
      $instructions.attr("maxlength") > max ||
      $instructions.val().length > maxlength) {
        alert(`Please limit your instruction to a maximum of ${max} characters`); // this should really be in a nice error div or something
        event.preventDefault();
        return false;
      }
   else {
   alert("good");
   return false; // return true for actual submit, or omit this else entirely
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="forms" action="/checkout" name="ordersubmit" id="shipping" method="post" novalidate="">
    <div class="col-xs-12 col-sm-offset-1 col-sm-11 noPadding">
        <label class="InstructionsBlock" for="Instructions">
            Instructions
        </label>
        <textarea id="Instructions" name="Instructions" maxlength="62" rows="6" cols="50">
        </textarea>
     <input type="submit" value="submit" />
</div>
</form>

person Nikki9696    schedule 08.07.2020
comment
Спасибо. Я смог правильно установить проверки на основе вашего кода. - person Fab; 10.07.2020