JSFiddle - React, Tailwind, and code Playground

by dcdruck

HTML

<form name = "Contact" action = "" onsubmit = "return validateForm();" method = "POST" >

    <p> Contact Reason: </p> <br>

    <select name = "ContactReason" >

        <option value = "Null"                               >                                       </option>
        <option value = "Technical"                      > Technical/Bug             </option>
        <option value = "Legal"                              > Legal                             </option>
        <option value = "Suggestion"                 > Suggestion/Opinion    </option>
        <option value = "Other"                              > Other                             </option>

    </select> <br><br>

    <p> Title: </p> <br>

    <input type = "text" name = "Title" maxlength = "50" /> <br><br>

    <p> Message: </p> <br>

    <textarea name = "Message" maxlength = "1000" cols = "50" rows = "5" ></textarea> <br><br>

    <input type = "text" name = "BotDetect" maxlength = "1" class = "hidden" />

    <p> What String do you See? &nbsp; &nbsp; &nbsp; <img src = "/PHP/Services/Captcha.php" /> </p> <br><br>

    <input type = "text" name = "Captcha" maxlength = "4" /><br><br>

                <input type = "hidden" name = "Agree" value = "False" />

        <p> <input type = "checkbox" name = "Agree" value = "True" /> - I Understand and Agree to the Disclaimer and Privacy Policy </p> <br><br>

    <input type = "submit" value = " Send Message " />

</form>

JavaScript

function validateForm()
{

    var ContactReason       = document.forms['Contact']['ContactReason'].value;
    var Title                           = document.forms['Contact']['Title'].value;
    var Message                     = document.forms['Contact']['Message'].value;
    var Captcha                     = document.forms['Contact']['Captcha'].value;

    if (ContactReason == 'Null')
    {
        alert("Please Enter a Contact Reason");
        return false;
    }

    if (Title == "" || Title == " " || Title == null)
    {
        alert("Please Enter a Title (Must Be Between 5 and 50 Characters)");
        return false;
    }

    if (Title.length < 5 || Title.length > 50)
    {
        alert("Please Enter a Title Between 5 and 50 Characters");
        return false;
    }

    if (Message == "" || Message == " " || Message == null)
    {
        alert("Please Enter a Message (Must Be Between 25 and 1000 Characters)");
        return false;
    }

    if (Message.length < 25 || Message.length > 1000)
    {
        alert("Please Enter a Message Between 25 and 1000 Characters");
        return false;
    }

    if (Captcha == "" || Captcha == " " || Captcha == null)
    {
        alert("Please Enter the Security Captcha (4 Characters Long)");
        return false;
    }

    if (Captcha.length < 4 || Captcha.length > 4)
    {
        alert("The Captcha is 4 Characters Long");
        return false;
    }

}