JSFiddle - React, Tailwind, and code Playground

by Danish Farman

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
  <form class="form-horizontal" method="POST" action="">
    <fieldset>
      <!-- Form Name -->
      <legend>Login</legend>
      <!-- Text input-->
      <div class="form-group">
        <label class="col-md-4 control-label" for="textinput">Username: </label>
        <div class="col-md-4">
          <input id="textinput" name="textinput" type="text" placeholder="Username" class="form-control input-md">
          <span class="help-block hidden">Required</span>
        </div>
      </div>
      <!-- Password input-->
      <div class="form-group">
        <label class="col-md-4 control-label" for="passwordinput">Password: </label>
        <div class="col-md-4">
          <input id="passwordinput" name="passwordinput" type="password" placeholder="Password" class="form-control input-md">
          <span class="help-block hidden">Required</span>
        </div>
      </div>
      <!-- Button -->
      <div class="form-group">
        <div class="col-md-4">
          <button id="btnLogin" type="submit" name="singlebutton" class="btn btn-primary">Login</button>
        </div>
      </div>
    </fieldset>
  </form>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
          <p></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
 ...

CSS

.error {
  color: red;
  display: block;
}

.hidden {
  display: none;
}

JavaScript

$(function() {

  "use strict";

  $("form").on('submit', function() {

    var validate = function(value) {
      return value !== undefined && value !== "" && value !== null ? value : "Required";
    };

    var username = $("#txtUsername").val().trim(),
      password = $("#txtPassword").val().trim();

    var User = [{
      Value: username,
      IsValid: validate(username)
    }, {
      Value: password,
      IsValid: validate(password)
    }];

    User.foreach(function(obj) {
      if (obj.IsValid) {
        alert(obj.Value);
      } else {
				$("#btnLogin").attr('');
      }
    })

    /*
    $.post('provide your server side webservice url here', {data:User})
    .success(function(e) {
    alert('success');
    })
    .error(function(e) {
    alert('error');
    });*/
    // data-toggle="modal" data-target="#myModal"

  });

});