Channel Form, make Captcha field required

Question

I'm using EE 2.9 and have the form below, can you make the Captcha field required?

{exp:channel:form channel="test" return="test/thank-you" logged_out_member_id="1" dynamic_title="[question]" status="pending" rules:captcha="required" rules:my_email="required" rules:first_name="required" rules:last_name="required"}
    {label:first_name}
    {field:first_name}

    {label:last_name}
    {field:last_name}

    {label:my_email}
    {field:my_email}

    {label:question}
    {field:question}

    {label:my_nearest_branch}
    {field:my_nearest_branch}

    <label for="captcha">Please enter the word you see in the image below:</label>
    {captcha}
    <input type="text" name="captcha" id="captcha" value="{captcha_word}" maxlength="20">

    <input type="submit" value="Ask Question" class="button">
{/exp:channel:form}

Answer 1

Well, There are two ways to do so.

Server side:

In your {exp:channel:form} tag, Add parameter rules:captcha="required"

Client side:

Use jquery.validate.js to make field required.

1. Include this js library: http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.js
2. Put the class required in input field.

3. Use jquery to run the code before form submits:

   <script type="text/javascript">
       $(document).ready(function() {
           $(document).on('submit', 'form#myForm', function(event) {
               if($(this).valid()){
                   return true;
               }else{
                   return false;
               }
           });
       });
   </script>
   

Here is some classes you can use to validate the form input fields.