Avoid bypassing maxlength attribute using jQuery

Question

I'm having trouble trying to validate a user bypassing the maxlength value in a textarea field but it seems none of my validations work. I'm trying to validate is a user can change the maxlength above our initial limit or if the maxlength is removed from the element.

It's kinda easy to do that but some users seem to be doing it.

Here's my code:

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

When the form is submitted it doesn't validate and the solution might be easier than I thought but I can't seem to make this work.

it's unclear to me what you're trying to check with this: if (instructions.val($(this).attr("maxlength")) > 70 || instructions.length) — Nikki9696
– Nikki9696, Commented Jul 8, 2020 at 17:49

Nikki9696 · Accepted Answer · 2020-07-09 14:28:01Z

1

You should always do server side validation. And I don't see the rest of your code, so I don't know what $(this) is. But here's a simple example of what I think you are trying to check.

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>

edited Jul 9, 2020 at 14:28

answered Jul 8, 2020 at 18:15

Nikki9696

6,3681 gold badge32 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fab Over a year ago

Thanks. I was able to set the validations correctly based on your code.

Collectives™ on Stack Overflow

Avoid bypassing maxlength attribute using jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related