I wish to have input of only letters into a text area in form It works well with the input fields, can't validate the textarea is it possible with jquery validate ? or what is another alternative 2) will this block malicious code input (such as xss.js)

      <form action="" method="POST" enctype="multipart/form-data" name="messageForm">
  <p>name of sender: 
   <input class="input" name="sender" id="sender" value="" size="13"
     maxlength="13" dir="ltr" autoplete="on" type="text" height="20" minlength="3" required><br>
   <p>name of receiver: 
      <input class="input" name="receiver" id="receiver" value="" size="13"
     maxlength="13" dir="ltr" autoplete="on" type="text" height="20" minlength="3" required><br>
   <p>Message: <br>
     <textarea name="message" id="message"  type="text" value="" rows="5" cols="30" dir="ltr" required></textarea><br>
   <input value="Submit" name="button" alt="submit" onsubmit="" border="0" type="submit" align="absmiddle"></p>

 </form>
<script>
    $("#messageForm").validate();
</script>

javascript

$().ready(function () {

    $("#submit").validate({
    rules: {
        sender: {
            required: true,
            minlength: 3,
          lettersonly: true
        },
        receiver: {
            required: true,
            minlength: 3,
            lettersonly: true
        },
        message: {
          required: true,
          minlength: 5,
          maxlength: 30,
          lettersonly: true
        },
      },
     messages: {
                sender: {required:"Please enter your name"},
                receiver:{required: "Please enter receiver name up to 3 characters"},
                message: {required: "Enter your message 3-20 characters"},
          },
 });

});

when it runs on chrome gives an error on last part: Unexpected identifier

I wish to have input of only letters into a text area in form It works well with the input fields, can't validate the textarea is it possible with jquery validate ? or what is another alternative 2) will this block malicious code input (such as xss.js)

      <form action="" method="POST" enctype="multipart/form-data" name="messageForm">
  <p>name of sender: 
   <input class="input" name="sender" id="sender" value="" size="13"
     maxlength="13" dir="ltr" autoplete="on" type="text" height="20" minlength="3" required><br>
   <p>name of receiver: 
      <input class="input" name="receiver" id="receiver" value="" size="13"
     maxlength="13" dir="ltr" autoplete="on" type="text" height="20" minlength="3" required><br>
   <p>Message: <br>
     <textarea name="message" id="message"  type="text" value="" rows="5" cols="30" dir="ltr" required></textarea><br>
   <input value="Submit" name="button" alt="submit" onsubmit="" border="0" type="submit" align="absmiddle"></p>

 </form>
<script>
    $("#messageForm").validate();
</script>

javascript

$().ready(function () {

    $("#submit").validate({
    rules: {
        sender: {
            required: true,
            minlength: 3,
          lettersonly: true
        },
        receiver: {
            required: true,
            minlength: 3,
            lettersonly: true
        },
        message: {
          required: true,
          minlength: 5,
          maxlength: 30,
          lettersonly: true
        },
      },
     messages: {
                sender: {required:"Please enter your name"},
                receiver:{required: "Please enter receiver name up to 3 characters"},
                message: {required: "Enter your message 3-20 characters"},
          },
 });

});

when it runs on chrome gives an error on last part: Unexpected identifier

• javascript
• jquery
• jquery-validate
• textarea

• 2 You should use $(function() { or $(document).ready(function() { as $().ready(function () { was deprecated a long time ago, and was never really good practice to begin with. – Rory McCrossan Commented Jul 4, 2016 at 10:09
• When I used $(document).ready(function() { I can't get it to apply over firefox - how so – eyalix Commented Jul 4, 2016 at 10:14

1 Answer 1

You are calling .validate() twice...

Here...

<script>
    $("#messageForm").validate();
</script>

And here...

$().ready(function () {
    $("#submit").validate({...

The .validate() method is only used to initialize the plugin on your form and cannot be called twice. All subsequent calls are always ignored.

However, in your case, it's ignored because you've attached the second instance of .validate() to $("#submit"), where your form's id is not submit and your form does not even have an id. You can only attach the .validate() method to the form you want validated, which is name="messageForm".

You simply need this...

$(document).ready(function () {

    $("[name='messageForm']").validate({
        rules: {
            sender: {
                required: true,
                minlength: 3,
                lettersonly: true
                ...

As already stated in ments, $().ready(function () {... is no longer remended. Use $(document).ready(function () {... instead.

DEMO: jsfiddle/unapufhp/