JSFiddle - React, Tailwind, and code Playground

by psycketom

HTML

<form id="contact-form" action="#" method="POST">
    <ul>
        <li>
            <input type="text" id='fname' name='fname' class='required' placeholder="Firstname"
            />
        </li>
        <li>
            <input type="text" id='lname' name='lname' class='required' placeholder="Lastname"
            />
        </li>
        <li>
            <input type="password" id='pwd' name='pwd' class='required' placeholder="Password"
            />
        </li>
        <li>
            <input type="password" id='confPwd' name='confPwd' class='required' placeholder="Confirm password"
            />
        </li>
        <li>
            <input type="text" id='email' name='email' class='required' placeholder="Email"
            />
        </li>
        <li>
            <input type="text" id='website' name='website' class='required' placeholder="Website"
            />
        </li>
        <li>
            <input type="submit" id='submit' value="Submit" />
        </li>
    </ul>
</form>

JavaScript

var formValidate = {
      validate: function(elem) {
          var frm = elem.attr('id');

          var invalid = 0;
          
           $('.required', '#' + frm).each(function() {
                if ($(this).val() === '') {
                     alert($(this).attr('id') + ' is a required field.');
                     $(this).focus();

                     invalid++;

                     return false; // <- affects "each", therefore stopping the loop
                }
           });

          // add these, to also return value from function
          if (invalid > 0) return false;

          return true;
      }
 };

$(function() {
     $('form').submit(function() {
           return formValidate.validate( $(this) ); // you must pass the returned value to your submit callback
     });
 });