Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- documented at http://digitalbush.com/projects/masked-input-plugin/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.3.1/jquery.maskedinput.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />
<body>
  <h1>Please register</h1>
  
  <ul id='people'>
    <li>
      <form>
        
        <p class="formError">
          Oops! There was an issue with this form. Please fix the errors listed below.
        </p>
        
        <p class="formSuccess">
          No errors. The form was submitted successfully.
        </p>
        
        <label class='nameLabel'>
          
          
          <span class='labelText'>
            Name: 
          </span>
          <input name='name' placeholder="Enter your name" />
          
          <span class='fieldError'>
            Name is Required
          </span>
          
          
        </label>
        
        <label class='emailLabel'>
          
          
          <span class='labelText'>
            Email: 
          </span>
          <input name='email' placeholder="Enter email" />
          
          <span class='fieldError'>
            Email is not valid
          </span>
          
          
        </label>
        
        <label class='pwLabel'>
          
          
          <span class='labelText'>
            Password: 
          </span>
          <input name='password' placeholder='Enter password' />
          
          <span class='fieldError'>
            Password is not valid
          </span>
          
          
        </label>
        
        <label class='birthLabel'>
          
          
          <span class='labelText'>
            Birthdate: 
          </span>
          <input name='birth' value='08/15/1976' />
          
          <span class='fieldError'>
            Birthdate is not valid
          </span>
          
          
        </label>
        
        <label class='WeChatLabel'>
          
          
          <span class='labelText'>
            WeChat ID: 
          </span>
          <input name='weChat' placeholder="weChat ID" />
          
          <span class='fieldError'>
            WeChat ID is not valid
          </span>
          
          
        </label>
        
       
        
        <div class='actions'>
          <button class='submit' type='submit'>Save</button>
        </div>
        
      </form>
    </li>
  </ul>
              
            
!

CSS

              
                body{
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
}

ul{
  list-style: none;
}

li{
  width:800px;
}

label{
  clear:both;
  display:block;
  padding-bottom:10px;
}

input{
  border: 1px solid #ccc;
  padding: 2px 5px;
  width:60%;
}

.labelText{
  display: inline-block;
  font-size:14px;
  width:20%;
}

.actions{
  padding-right:18%;
  text-align: right;
}


/* default error styles */
.formError{
  background: #FFCCCC;
  display: none;
  padding: 5px 10px;
} 

.fieldError{
  color: #f00;
  display: none;
  font-size:11px;
}

/* error state styles */
form.hasError .formError{
  display: block; /* show the error */
}

label.hasError .fieldError{
  display: inline; /* show the error */
}

label.hasError .labelText{
  color: #f00;
}

label.hasError input{
  border: 1px solid #f00;
}


/* default success styles */
.formSuccess{
  background: #CCFFCC;
  display: none;
  padding: 5px 10px;
}

/* success state styles */
form.hasSuccess .formSuccess{
  display: block;
}
              
            
!

JS

              
                
// add event listener
$('.submit').click(validate);

// add masking
$(".socialSecLabel input").mask("999-99-9999");

// add datepicker
$( ".birthLabel input" ).datepicker();

// function that executes when click event is fired
function validate(evt){
  evt.preventDefault(); // stop button from submitting a form or link from going to a URL
  
  // console.log(this);
  var errorCount = 0; // always start error count at 0
  
  
  var $target = $(evt.currentTarget);// the element you clicked on
  var $form = $target.closest('form');
  
  
  var $nameLabel = $form.find('.nameLabel'); // set the label element to a variable for convinience and readability
  var $nameInput = $nameLabel.find('input'); // get the input field inside of that label
  var nameVal = $nameInput.val(); // get the value inside of that field
  
  //alert(birthVal);
  if(nameVal === ''){ // check to see if the input is blank
    $nameLabel.addClass('hasError'); // add the class that shows the error and changes colors
    errorCount++; // add 1 to this number, because this has an error: we'll use this later
      }
  else{
    $nameLabel.removeClass('hasError');
  }
  
  
  var $birthLabel = $form.find('.birthLabel'); // set the label element to a variable for convinience and readability
  var $birthInput = $birthLabel.find('input'); // get the input field inside of that label
  var birthVal = $birthInput.val(); // get the value inside of that field
  
  //alert(birthVal);
  if(birthVal === ''){ // check to see if the input is blank
    $birthLabel.addClass('hasError'); // add the class that shows the error and changes colors
    errorCount++; // add 1 to this number, because this has an error: we'll use this later
      }
  else{
    $birthLabel.removeClass('hasError');
  }
  
  
  var $socialSecLabel = $form.find('.socialSecLabel'); // set the label element to a variable for convinience and readability
  var $socialSecInput = $socialSecLabel.find('input'); // get the input field inside of that label
  var socialSecVal = $socialSecInput.val(); // get the value inside of that field
  
  //alert(birthVal);
  if(socialSecVal === ''){ // check to see if the input is blank
    $socialSecLabel.addClass('hasError'); // add the class that shows the error and changes colors
    errorCount++; // add 1 to this number, because this has an error: we'll use this later
      }
  else{
    $socialSecLabel.removeClass('hasError');
  }
  
  // check to see if there are any errors in the form
  if(errorCount > 0){
    $form.addClass('hasError');
    $form.removeClass('hasSuccess');
  }
  else{
    $form.removeClass('hasError');
    $form.addClass('hasSuccess');
  }
  
}
              
            
!
999px

Console