Semantic UI Form

Sign Up form sample using Semantic UI

by Renato Del Castillo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<body>
  <h1>
    <i class="user icon"></i><span>Sign Up</span>
  </h1>
  <form class="ui form">
    <div class="two fields">
      <div class="name field">
        <label>Name</label>
        <input type="text" />
      </div>
      <div class="email field">
        <label>Email</label>
        <input type="text" />
      </div>
    </div>
    <div class="two fields">
      <div class="phone field">
        <label>Phone</label>
        <div class="ui left icon input">
          <input type="text" />
          <i class="phone icon"></i>
        </div>
      </div>
      <div class="role field">
        <label>Role</label>
        <div class="ui search selection dropdown">
          <input type="hidden" name="role">
          <i class="dropdown icon"></i>
          <div class="default text">Select Role</div>
          <div class="menu">
            <div class="item" data-value="engineer"><i class="icon keyboard"></i>Engineer</div>
            <div class="item" data-value="productdev"><i class="icon archive"></i>Product Development</div>
            <div class="item" data-value="sales"><i class="icon dollar"></i>Sales</div>
            <div class="item" data-value="productdev"><i class="icon building"></i>Biz Dev</div>
            <div class="item" data-value="marketing"><i class="icon users"></i>Marketing</div>
            <div class="item" data-value="acctmgnt"><i class="icon comments"></i>Account Management</div>
            <div class="item" data-value="manager"><i class="icon briefcase"></i>Manager</div>
          </div>
        </div>
      </div>
    </div>
    <div class="agree field">
      <div class="ui checkbox">
        <input type="checkbox">
        <label>I agree...

CSS

form {
  padding: 0px 20px;
}
h1 {
  padding: 20px 0px 10px;
  text-align: center;
}
.submit {
  text-align: center;  
}
@media only screen and (max-width: 766px) {
  form {
    padding: 0px 20px 20px;
  }
}

JavaScript

function dataModel() {
  this.name = "";
  this.email = "";
  this.phone = "";
  this.role = "";
  this.acceptTerms = false;
  this.load = function() {
    this.name = $(".name.field input").val();
    this.email = $(".email.field input").val();
    this.phone = $(".phone.field input").val();
    this.role = $(".role.field .ui.dropdown").dropdown("get value");
    this.acceptTerms = $(".agree.field .ui.checkbox").checkbox("is checked");
  }
  this.save = function() {
      $(".success.modal").modal("show");
  }
  this.validate = function() {
    this.hideErrors();
    return this.name && 
       this.email && 
       this.phone && 
       this.role && 
       this.acceptTerms;
  }
  this.showErrors = function() {  
    $(".ui.form").addClass("error");  
    if(!this.name) {
      $(".name.field").addClass("error");      
    }
    if(!this.email) {
      $(".email.field").addClass("error");      
    }
    if(!this.phone) {
      $(".phone.field").addClass("error");      
    }
    if(!this.role) {
      $(".role.field").addClass("error");      
    }
    if(!this.acceptTerms) {
      $(".agree.field").addClass("error");      
    }
  }
  this.hideErrors = function() {
      $(".ui.form").removeClass("error"); 
      $(".name.field").removeClass("error"); 
      $(".email.field").removeClass("error"); 
      $(".phone.field").removeClass("error"); 
      $(".role.field").removeClass("error"); 
      $(".agree.field").removeClass("error"); 
  }
}

var newUser = new dataModel();
$("document").ready(function() {
  $(".ui.dropdown").dropdown();
  $(".ui.checkbox").checkbox();
  $(".submit > .button").click(function() {
    newUser.load();
    if(newUser.validate()) {
      newUser.save();
    } else {
      newUser.showErrors();
    }
  });
});