CSS custom class not getting added to PHP function using jQuery

Beginners - Learning PHP
#1

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">
      $(document).ready(function(){
       var email="<?php the_validation_message('email');?>";
       $(email).addClass('failure-message');

       var animals = "<?php the_validation_message('animals');?>";
       $(animals.addClass('failure-message');

       var date = "<?php the_validation_message('animals');?>";
       $(date).addClass('failure-message');

      });
    </script>

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

.help-block, .failure-message
{
  color:red;

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

.failure-message
{
  color:deeppink;
  font-style: italic;
}

Thanks in advance

#2

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

#3

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.

#4

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

#5

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'); ?>


    </label>

And in the other php file I have these functions:

<?php
// 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 {
                    $valid=true;
                    $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'] = "";
                  }

                  if(!empty($_POST['animals'])){
                    //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'];
             } 
          }
        }
?>
#6

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; ?> 
</div>
<?php endif; ?>
#7

Thank You :slight_smile:

1 Like
Sponsor our Newsletter | Privacy Policy | Terms of Service