Osclass how to make Required fields with a error message

Question

I try to make some new required fields with a error message! But i don't find how to do this! I use ctg-housing theme

This is the code in my file:

<div class="contact-us-your-name"> 
<label class="control-label" for="yourName">
  <span class="required_fields">* </span>
  <?php _e('Your Name', 'ctg_housing'); ?>
</label>
<?php ContactForm::your_name(); ?>
</div>

<div class="contact-us-your-email"> 
<label class="control-label" for="yourEmail">
  <span class="required_fields">* </span>
  <?php _e('Your E-mail', 'ctg_housing'); ?>
</label>
<?php ContactForm::your_email(); ?>
</div>

<div class="contact-us-subject"> 
<label class="control-label" for="subject">
  <?php _e('Subject', 'ctg_housing'); ?>
  (<?php _e('optional', 'ctg_housing'); ?>)
</label>
<?php ContactForm::the_subject(); ?>
</div>

<div class="contact-us-message"> 
<label class="control-label" for="message">
  <span class="required_fields">* </span>
  <?php _e('Message', 'ctg_housing'); ?>
</label>
<?php ContactForm::your_message(); ?>
</div>

<?php ctg_housing_show_flash_message(); ?>

<div class="contact-us-send-message">  
<button type="submit" class="small radius text-center" style="margin-bottom: 0px;">
  <?php _e("Send Message", 'ctg_housing');?>
</button>
</div>

Then i receive 1 error message see picture 1.

When i add the code for required i receive a wrong error see picture 2

<script type="text/javascript">
$("#message").attr('required', 'required');
</script>

And what i need is like the picture 3 that the error message appears under the field! See picture 3 like under email.

Thanks, hope someone can help.

Answer 1

You can try following javascript and place this to after form above footer hook function:

<script>
$(document).ready(function(){
    $("#message").rules("add", {required: true, messages: { required: "<?php osc_esc_js(__('Message field is required','ctg_housing')); ?>" }});
}); 

Answer 2

Unfortunately, those *Form class from Osclass do not allow you to add custom attributes.

You will have to replace <?php ContactForm::your_name(); ?> by a somewhat more classic:

<input
  id="yourName"
  type="text"
  name="yourName"
  value="<?php echo osc_esc_html(htmlentities($value, ENT_COMPAT, "UTF-8")); ?>" 
/>

And so on.

This is an issue (can't find the link to the discussion) that is known from the Osclass team but they (we, the community) haven't found a proper solution to generate form inputs correctly and fitting in all themes.