JSFiddle - React, Tailwind, and code Playground

by Scoobler

HTML

<form method="post" id="comment-form" accept-charset="UTF-8">
    <div class="form-item form-type-textfield form-item-name">
        Name: <input type="text" id="edit-name" name="name" value="" size="30" maxlength="60" class="form-text required" />
    </div>
    <div class="form-item form-type-textfield form-item-mail">
        
        Mail: <input type="text" id="edit-mail" name="mail" value="" size="30" maxlength="64" class="form-text required" />
        
    </div>
    
    <div class="form-item  form-item-homepage">
        
        Homepage: <input type="text" id="edit-homepage" name="homepage" value="" size="30" maxlength="255" class="form-text" />
    </div>
    <div  id="edit-comment-body">
        
        <label for="edit-comment-body-und-0-value">comment <span title="required" class="form-required">*</span></label>
        
        <textarea class="text-full form-textarea required" id="edit-comment-body-und-0-value" name="comment_body[und][0][value]" cols="60" rows="5"></textarea></div>
</div>
    <input type="submit" id="edit-submit" value="submit" />

JavaScript

$("#edit-submit").click(function(e) {
        $('.error-message').remove();
        var name = $('#edit-name');
        var mail = $('#edit-mail');
        var comment = $('#edit-comment-body-und-0-value');
        var blank = false;
        if (name.val()=='') {
            name.after('<span style="color:red;" class="error-message">please type your name</span>');
            blank = true;
        }
        if (mail.val()=='') {
            mail.after('<span style="color:red;" class="error-message">please type your emali</span>');
            blank = true;
        }
        if (comment.val()=='') {
            comment.after('<span style="color:red;" class="error-message">pleae type the content</span>');
            blank = true;
        }
        if (blank) {
            e.preventDefault();   
        }
    });