JSFiddle - React, Tailwind, and code Playground

by cory a

HTML

<div class="container">

  <form class="form-signin" id="#sign-in">
    <h2 class="form-signin-heading">Please sign in</h2>
    <label for="inputEmail" class="sr-only">Email address</label>
    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
    <div class="checkbox">
      <label>
        <input type="checkbox" value="remember-me"> Remember me
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="button" id="btn1">Sign in</button>
  </form>

</div>
<!-- /container -->
<div>
  
</div>
<div id="dialog" title="Dialog Form"></div>
<div id="dialog-form" title="Create new user">


  <label for="name">Name</label>
  <input type="text" name="name" id="name" required="true" />
  <br/>
  <label for="email">Email</label>
  <input type="text" name="email" id="email" required="true" email="true" />
  <br/>
  <label for="password">Password</label>
  <input type="password" name="password" id="password" />


</div>

JavaScript

$('#btn1').click(function () {
  
  $("#dialog-form").dialog("open");
  if ($("#name").val() != 'Srivatsava') {
    alert('you fool');
  }
});

//code for dialog
$("#dialog-form").dialog({
  autoOpen: false,
  height: 300,
  width: 350,
  modal: true,
  zIndex: 1,
  buttons: {
    "Save": function () { //on click of save button of dialog
      if ($('#sign-in').valid()) { //call valid for form2 and show the errors
        alert('submit form'); //only if the form is valid submit the form
        $(this).dialog("close");
      }
    },
    Cancel: function () {
      $(this).dialog("close");
    }
  }

});