"Foundation Form"
Foundation 6.3.1 Snippet by plgaguiar

Post to Facebook Tweet this

<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html class="no-js" lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Foundation for Sites</title> <link rel="stylesheet" href="css/foundation.css"> <link rel="stylesheet" href="css/app.css"> </head> <body> <section id="foundation-example"> <div style="height: 50px;background: lightblue;"></div> <div class="foundation-example__ex-wrapper"> <div class="foundation-example__in-wrapper"> <div class="foundation-example__title"> Foundation Form</div> <div class="foundation-example__form-wrapper"> <form method="post" id="Feedback" > <div class="row"> <div class="large-6 columns"> <label>Product ID <input type="text" name="product_id"> <div class="error_txt inactive" id="error_pro_id">Please provide your Product ID.</div> </label> </div> <div class="large-6 columns"> <label>Person In Charge <input type="text" name="per_in_chg" > <div class="error_txt inactive" id="error_per_in_chg">Please provide your Person In Charge.</div> </label> </div> </div> <div class="row"> <div class="large-6 columns"> <label>Name <input type="text" name="name" > <div class="error_txt inactive" id="error_name">Please provide your name.</div> </label> <label>Email <input type="text" name="email" > <div class="error_txt inactive" id="error_email">Please provide your email.</div> </label> <label>Phone <input type="text" name="phone" class="numeric allownumericwithoutdecimal"> <div class="error_txt inactive" id="error_phone">Please provide your phone.</div> </label> </div> <div class="large-6 columns"> <label>Address <textarea rows="10" name="address" ></textarea> <div class="error_txt inactive" id="error_address">Please provide your address.</div> </label> </div> </div> <div class="row"> <div class="large-12 columns"> <label>Comment <textarea rows="10" name="comment" placeholder="Comment"></textarea> <div class="error_txt inactive" id="error_comment">Please provide your comment.</div> </label> </div> </div> <div class="row"> <div class="large-12 columns text-center"> <text class="button" type="text" id="submit">submit</text> </div> </div> </form> </div> </div> </div> <div style="height: 50px;background: lightblue;"></div> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/vendor/jquery.js"></script> <script src="js/vendor/what-input.js"></script> <script src="js/vendor/foundation.js"></script> <script src="js/app.js"></script> </body> </html>
/*base*/ .error_txt{margin-bottom: 10px; display: block; color: #f00; font-size: 13px;} .inactive{display:none;} /*foundation-example*/ #foundation-example{} .foundation-example__ex-wrapper{ background-color: lightblue; } .foundation-example__in-wrapper{ margin: auto; max-width: 960px; background: white; padding: 30px; } .foundation-example__title{ text-align: center; font-size: 40px; margin-bottom: 32px; } .foundation-example__form-wrapper{ }
jQuery(document).foundation(); (function($) { $(function() { // Code here for active or inactive the error text. $('.numeric').keypress(function(event){ var charCode = (event.which) ? event.which : event.keyCode return !(charCode > 31 && (charCode < 48 || charCode > 57)); }); $(".allownumericwithoutdecimal").on("keypress keyup blur",function (event) { jQuery(this).val($(this).val().replace(/[^\d].+/, "")); if ((event.which < 48 || event.which > 57)) { event.preventDefault(); } }); }); })(jQuery);

Related: See More

Material Dashboard React
Foundation Form
Foundation Button
Foundation Modal

Questions / Comments: