Избегайте обхода атрибута maxlength с использованием jQuery - PullRequest
Новая
       80

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

0 голосов
/ 08 июля 2020

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

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

Вот мой код: 

<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");
    }
}

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

1 Ответ

1 голос
/ 08 июля 2020

Вы всегда должны выполнять проверку на стороне сервера. И я не вижу остальной части вашего кода, поэтому я не знаю, что такое $ (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>
...