CSS custom class not getting added to PHP function using jQuery


I am trying to add the custom class for the failure messages (failure-message) which are in the php function the_validation_message($type) for the form validation. I tried to use the addClass using the jquery creating variables and storing the validation message type for different inputs but its not working. I have to apply the addClass only if the the_validation_message($type) appears like if the user enters wrong input then for this message the css should be applied.

Here is the code for the JavaScript portion for the html:

<script type="text/javascript">
       var email="<?php the_validation_message('email');?>";

       var animals = "<?php the_validation_message('animals');?>";

       var date = "<?php the_validation_message('animals');?>";


The css file which contains the customed class .failure-message

.help-block, .failure-message

  animation-name: glow;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;

  font-style: italic;

Thanks in advance


And what is that? It isn’t a JQuery selector.


Hello @astonecipher,
I am trying to store in var email the php function to add the addClass function on it that is the css custom class. I don’t understand if this is the correct way for the php function or is there any other good way to do this.


Not quite. You need to just add the class to the element, not the message…


Oh ok. But I have the form this way in html file:

 <form action="a6.php" method="post">
    <label for="email">  Please enter your email address:

      <input type="text" name="email" id="email" data-validation="email">

      <!-- Display validation message for email input -->
      <?php the_validation_message('email'); ?>


And in the other php file I have these functions:

// Global result of form validation
$valid = false;
// Global array of validation messages. For valid fields, message is ""
$val_messages = Array();
    //Check each field to make sure submitted data is valid. If no boxes are checked, isset() will return false
        function validate()
            global $valid;
            global $val_messages;
            // if email is valid, push "", else push "email is not valid"

            if($_SERVER['REQUEST_METHOD']== 'POST')
              // Use these patterns to check email and date, or come up with your own.
              // email: '#^(.+)@([^\.].*)\.([a-z]{2,})$#'
              // date: '#^\d{4}/((0[1-9])|(1[0-2]))/((0[1-9])|([12][0-9])|(3[01]))$#'

               if(isset($_POST['email']) == true && isset($_POST['date']) == true){
                  if(!preg_match('#^(.+)@([^\.].*)\.([a-z]{2,})$#', $_POST['email'])){
                    $valid = false;
                    $val_messages['email'] = "email not correct format";
                  else {
                    $val_messages['email'] = "";

                  if(!preg_match('#^\d{4}/((0[1-9])|(1[0-2]))/((0[1-9])|([12][0-9])|(3[01]))$#', $_POST['date'])){
                     $valid = false;
                     $val_messages['date'] = "please enter a valid date in the format yyyy/mm/dd";
                  } else{
                      $valid = true;
                      $val_messages['date'] = "";

                    //Counting number of checked checkboxes
                    $checked_count = count($_POST['animals']);
                      if($checked_count >= 3){
                        $valid = true;
                        $val_messages['animals'] = "";
                      } else{
                        $valid = false;
                        $val_messages['animals'] = "please choose atleast three animals";

             if(isset($_POST['animals']) == false){
                     $valid = false;
                     $val_messages['animals'] = "please choose atleast three animals";
        // Display error message if field not valid. Displays nothing if the field is valid.
        function the_validation_message($type) {

          global $val_messages;

          if($_SERVER['REQUEST_METHOD'] == 'POST')

             if($type == 'email'){
                echo $val_messages['email'];
             } else if($type == 'animals'){
                echo $val_messages['animals'];
             } else if($type == 'date'){
                echo $val_messages['date'];


Don’t do a function call for that. It is unnecessary and actually complicates things.

<-- Display validation messages --> 
<?php  if(isset($val_messages):?>
<div class="failure-message">
<?php foreach($val_messages as $msg): ?> 
    <p><?php  echo $msg; ?></p>
<?php  endforeach; ?> 
<?php endif; ?>


Thank You :slight_smile: