JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<div>
    <form role="form">
        <div class="form-group">
            <label for="email">Email address:</label>
            <input type="email" class="form-control" id="email" name="email" required>
        </div>
        <div class="form-group">
            <label for="pwd">Password:</label>
            <input type="password" class="form-control" id="pwd" required>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">Remember me</label>
        </div>
        <button class="btn btn-default" id="submit">Submit</button>
    </form>
</div>Bagaimana kalau memanfaatkan atribut Required

CSS

.error {
    border: 1px solid #ff0000;
}

JavaScript

/*jake let say i have long form, but here i created simple form,
let's imagine if i have many form should i make if else with long script, and i need to make it not long script, thanks jake for you helping as long as become poor developer, please don't angry ya ?
*/





$("form").submit(function (e) {
    $(".error",this).removeClass("error")
    var email = $("#email");
    var pwd = $("#pwd");
    if (email.val() === "") {
        email.addClass("error");
        e.preventDefault();
    } 
    if (pwd.val() === "") {
        pwd.addClass("error");
        e.preventDefault();
    }

	if ( $(".error",this).length) alert("errors")


});