CODEWITHSUNDEEP
javascriptjqueryjquery-validate
one-hand-octopus
one-hand-octopus

Reputation: 2763

How to specify the validated field in jQuery-validate

I have 2 fields: Name Query and Date of Birth, while Name Query is mandatory and DoB isn't. I have the following form to show an validation message under the Name Query field:

var myForm = $("#myform").validate({
  rules: {
    NameQuery: "required",
    DoBQuery: {
      required: false
    }
  },
  messages: {
    NameQuery: "Please fill in name query field",
    DoBQuery: ""
  }
});
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<form id="myform" method="post" action="">
  <div>
    <label for="NameQuery">Name</label>
    <input type="text" id="NameQuery" name="NameQuery">
  </div>
  <div>
    <label for="DoBQuery">Date of Birth</label>
    <input type="text" id="DoBQuery" name="DoBQuery">
  </div>
  <input type="submit" value="Search">
</form>

Now I'd like to add some styling to the Name Query field validation message. Some code was added to the snippet, notice that the <div class="error__input"></div> has to EXIST IN BOTH FIELDS like in the snippet

var myForm = $("#myform").validate({
  rules: {
    NameQuery: "required",
    DoBQuery: {
      required: false
    }
  },
  messages: {
    NameQuery: "Please fill in name query field",
    DoBQuery: ""
  },
  errorElement : 'div',
  errorLabelContainer: '.error__input'
});
.error__input{
  min-height: 20px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="myform" method="post" action="">
  <div>
    <label for="NameQuery">Name</label>
    <input type="text" id="NameQuery" name="NameQuery">
    <div class="error__input"></div>
  </div>
  <div>
    <label for="DoBQuery">Date of Birth</label>
    <input type="text" id="DoBQuery" name="DoBQuery">
    <div class="error__input"></div>
  </div>
  <input type="submit" value="Search">
</form>

Now the validation message exists in both fields, I understand that jQuery-validate finds the error__input div and apply the class to it, but why does it add the message to the second field and how can I set the alert message to apply only on the first message while both <div class="error__input"></div> have to be there?

Upvotes: 1

Views: 134

Answers (3)

ReSedano
ReSedano

Reputation: 5060

You could use errorPlacement to put your error message next to the error element.

errorPlacement: function(error,element){
   error.appendTo(element.next(".error__input"));
}


var myForm = $("#myform").validate({
  rules: {
    NameQuery: "required",
    DoBQuery: {
      required: false /* if it is not required, why you put here? You can simply not insert this input field in validate()'s rules. */
    }
  },
  messages: {
    NameQuery: "Please fill in name query field"
  },
  errorElement : 'div',
  errorPlacement: function(error,element){
    error.appendTo(element.next(".error__input"));
  }
});
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="myform" method="post" action="">
  <div>
    <label for="NameQuery">Name</label>
    <input type="text" id="NameQuery" name="NameQuery">
    <div class="error__input"></div>
  </div>
  <div>
    <label for="DoBQuery">Date of Birth</label>
    <input type="text" id="DoBQuery" name="DoBQuery">
    <div class="error__input"></div>
  </div>
  <input type="submit" value="Search">
</form>

Upvotes: 1

Nilkanth Shingala
Nilkanth Shingala

Reputation: 9

you should remove <div class="error__input"></div> tag after Date of Birth field

Upvotes: -1

Prawin soni
Prawin soni

Reputation: 452

You want something like this, I guess:

var myForm = $("#myform").validate({
  rules: {
    NameQuery: "required",
    DoBQuery: {
      required: false
    }
  },
  messages: {
    NameQuery: "Please fill in name query field",
    DoBQuery: ""
  }
});
#myform .error {
    display: block;
    color: red;
}

#myform input {
  display: inline;
}

#myform > div {
  height: 50px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<form id="myform" method="post" action="">
  <div>
    <label for="NameQuery">Name</label>
    <input type="text" id="NameQuery" name="NameQuery" style="display: inline-block;">
  </div>
  <div>
    <label for="DoBQuery">Date of Birth</label>
    <input type="text" id="DoBQuery" name="DoBQuery" style="display: inline-block;">
  </div>
  <input type="submit" value="Search">
</form>

Upvotes: 1

Related Questions