form contact page submission

Issue

Any idea why, when I send out a message on my contact page that's through netlify forms with Recaptcha, it shows up as blank messages? I utilized an anchor tag as my form submit button using an onclick JS function, but it doesn't enforce that the form be filled out, so it allows for a blank submission and when it is filled out, it still shows as blank, any help is welcomed thank you.

             <div class="right-contact">
                    <form name="contact" data-netlify="true" data- 
                netlify-recaptcha="true" id="GFG" class="contact-form">
                        <div class="input-control i-c-2">
                            <input name="name" id="name" type="text" required placeholder="YOUR NAME">
                            <input name="email" id="email" type="email" required placeholder="YOUR EMAIL">
                        </div>
                        <div class="input-control">
                            <input name="subject" id="subject" type="text" required placeholder="ENTER SUBJECT">
                        </div>
                        <div class="input-control">
                            <textarea type="text" name="message" id="message" cols="15" rows="8" required placeholder="Message Here..."></textarea>
                        </div>
                        <div data-netlify-recaptcha="true"></div>
                        <div class="submit-btn">
                            <a href="#" method="POST" type="submit" onclick="myFunction()" class="main-btn">
                                <span class="btn-text">Send Message</span>
                                <!-- <span class="btn-icon"><i class="fas fa-download"></i></span> -->
                            </a>
                        </div>
                    </form>
                </div>
                    
          
                            
                            
  <script src="js/site.js"></script>
<script>
    function myFunction() {
            document.getElementById("GFG").submit();
        }
</script>                      
                        
                            
                        
                        
                            
                        
                        
                        
                           
   

Solution

Make sure you have a name="field_name" in your textarea and an id. In order to make sure the field is not empty, you need to validate first.

Add "required" to your textarea like this:

<textarea name="field_name" id="field_id" cols="15" rows="8" placeholder="Message Here..." required></textarea>

You can also check if the textarea contains any message by inspecting its value length inside your function.

function myFunction() {    
    if (document.getElementById('message').value.length == 0 ) {
        alert("Please fill out the message field")
    }
    else {
        document.getElementById("GFG").submit();
    }
}

Answered By - dns