如何添加输入验证

Question

我正在尝试创建一个多表单，我尝试了很多次来添加输入验证（如果表单字段（名称）为空，则必填属性将阻止该表单成为下一个按钮），但无法运行或显示更多结果错误.... 所以，我需要如何在多表单中添加验证（名称，电子邮件和密码） 例如，当单击下一步按钮时，需要输入 电子邮件验证^ [\ w \ d ._-] + @ [\ w \ d .-] +。[\ w \ d] {2,6} $ 密码验证（（？=。 \ d）（？=。 [az]）（？=。 [AZ]）（？=。 [@＃$％] ）。{8,15}） 如果否，系统将显示（电子邮件格式错误）或（密码格式错误） 这是我的脚本：

$(document).ready(function(){
          $(".form-wrapper .button").click(function(){
            var button = $(this);
            var currentSection = button.parents(".section");
            var currentSectionIndex = currentSection.index();
            var headerSection = $('.steps li').eq(currentSectionIndex);
            currentSection.removeClass("is-active").next().addClass("is-active");
            headerSection.removeClass("is-active").next().addClass("is-active");

            $(".form-wrapper").submit(function(e) {
              e.preventDefault();
            });

            if(currentSectionIndex === 2){
              $(document).find(".form-wrapper .section").first().addClass("is-active");
              $(document).find(".steps li").first().addClass("is-active");
            }
          });
        });

html, body{
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          font-family: 'Open Sans', sans-serif;
          background-color: #3498db;
        }

        h1, h2, h3, h4, h5 ,h6{
          font-weight: 200;
        }

        a{
          text-decoration: none;
        }

        p, li, a{
          font-size: 14px;
        }

        fieldset{
          margin: 0;
          padding: 0;
          border: none;
        }

        /* GRID */

        .twelve { width: 100%; }
        .eleven { width: 91.53%; }
        .ten { width: 83.06%; }
        .nine { width: 74.6%; }
        .eight { width: 66.13%; }
        .seven { width: 57.66%; }
        .six { width: 49.2%; }
        .five { width: 40.73%; }
        .four { width: 32.26%; }
        .three { width: 23.8%; }
        .two { width: 15.33%; }
        .one { width: 6.866%; }

        /* COLUMNS */

        .col {
        	display: block;
        	float:left;
        	margin: 0 0 0 1.6%;
        }

        .col:first-of-type {
          margin-left: 0;
        }

        .container{
          width: 100%;
          max-width: 700px;
          margin: 0 auto;
          position: relative;
        }

        .row{
          padding: 20px 0;
        }

        /* CLEARFIX */

        .cf:before,
        .cf:after {
            content: " ";
            display: table;
        }

        .cf:after {
            clear: both;
        }

        .cf {
            *zoom: 1;
        }

        .wrapper{
          width: 100%;
          margin: 30px 0;
        }

        /* STEPS */

        .steps{
          list-style-type: none;
          margin: 0;
          padding: 0;
          background-color: #fff;
          text-align: center;
        }


        .steps li{
          display: inline-block;
          margin: 20px;
          color: #ccc;
          padding-bottom: 5px;
        }

        .steps li.is-active{
          border-bottom: 1px solid #3498db;
          color: #3498db;
        }

        /* FORM */

        .form-wrapper .section{
          padding: 0px 20px 30px 20px;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          background-color: #fff;
          opacity: 0;
          -webkit-transform: scale(1, 0);
          -ms-transform: scale(1, 0);
          -o-transform: scale(1, 0);
          transform: scale(1, 0);
          -webkit-transform-origin: top center;
          -moz-transform-origin: top center;
          -ms-transform-origin: top center;
          -o-transform-origin: top center;
          transform-origin: top center;
          -webkit-transition: all 0.5s ease-in-out;
          -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
          text-align: center;
          position: absolute;
          width: 100%;
          min-height: 300px
        }

        .form-wrapper .section h3{
          margin-bottom: 30px;
        }

        .form-wrapper .section.is-active{
          opacity: 1;
          -webkit-transform: scale(1, 1);
          -ms-transform: scale(1, 1);
          -o-transform: scale(1, 1);
          transform: scale(1, 1);
        }

        .form-wrapper .button, .form-wrapper .submit{
          background-color: #3498db;
          display: inline-block;
          padding: 8px 30px;
          color: #fff;
          cursor: pointer;
          font-size: 14px !important;
          font-family: 'Open Sans', sans-serif !important;
          position: absolute;
          right: 20px;
          bottom: 20px;
        }

        .form-wrapper .submit{
          border: none;
          outline: none;
          -webkit-box-sizing: content-box;
          -moz-box-sizing: content-box;
          box-sizing: content-box;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
        }

        .form-wrapper input[type="text"],
        .form-wrapper input[type="password"]{
          display: block;
          padding: 10px;
          margin: 10px auto;
          background-color: #f1f1f1;
          border: none;
          width: 50%;
          outline: none;
          font-size: 14px !important;
          font-family: 'Open Sans', sans-serif !important;
        }

        .form-wrapper input[type="radio"]{
          display: none;
        }

        .form-wrapper input[type="radio"] + label{
          display: block;
          border: 1px solid #ccc;
          width: 100%;
          max-width: 100%;
          padding: 10px;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          cursor: pointer;
          position: relative;
        }

        .form-wrapper input[type="radio"] + label:before{
          content: "✔";
          position: absolute;
          right: -10px;
          top: -10px;
          width: 30px;
          height: 30px;
          line-height: 30px;
          border-radius: 100%;
          background-color: #3498db;
          color: #fff;
          display: none;
        }

        .form-wrapper input[type="radio"]:checked + label:before{
          display: block;
        }

        .form-wrapper input[type="radio"] + label h4{
          margin: 15px;
          color: #ccc;
        }

        .form-wrapper input[type="radio"]:checked + label{
          border: 1px solid #3498db;
        }

        .form-wrapper input[type="radio"]:checked + label h4{
          color: #3498db;
        }

<html >
        <head>
          <meta charset="UTF-8">
          <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
        </head>

        <body>
            <div class="container">
            <div class="wrapper">
              <ul class="steps">
                <li class="is-active">Step 1</li>
                <li>Step 2</li>
              </ul>
              <form class="form-wrapper">
                <fieldset class="section is-active">
                  <h3>Your Details</h3>
                  <input type="text" name="name" id="name" placeholder="Name">
                  <input type="text" name="email" id="email" placeholder="Email">
                  <input class="button" type="button" value="Next">
                </fieldset>
                <fieldset class="section">
                  <h3>Choose a Password</h3>
                  <input type="password" name="password" id="password" placeholder="Password">
                  <input type="password" name="password2" id="password2" placeholder="Re-enter Password">
                  <input class="submit button" type="submit" value="Sign Up">
                </fieldset>
                <fieldset class="section">
                  <h3>Account Created!</h3>
                  <p>Your account has now been created.</p>
                  <div class="button">Reset Form</div>
                </fieldset>
              </form>
            </div>
          </div>
        </body>
        </html>

Answer 1

在输入代码中使用必填属性，使该字段成为必填字段

 <form class="form-wrapper">
            <fieldset class="section is-active">
              <h3>Your Details</h3>
              <input type="text" name="name" id="name" placeholder="Name" required>
              <input type="text" name="email" id="email" placeholder="Email" required>
              <input class="button" type="button" value="Next">
            </fieldset>
            <fieldset class="section">
              <h3>Choose a Password</h3>
              <input type="password" name="password" id="password" placeholder="Password" required>
              <input type="password" name="password2" id="password2" placeholder="Re-enter Password" required>
              <input class="submit button" type="submit" value="Sign Up">
            </fieldset>
            <fieldset class="section">
              <h3>Account Created!</h3>
              <p>Your account has now been created.</p>
              <div class="button">Reset Form</div>
            </fieldset>
          </form>

Answer 2

您可以使用required属性来实现此目的。请检查documentation以获取更多验证类型。

我创建了两个单独的表单来检查每次按钮单击的有效性。

$(document).ready(function(){

      $(".form-wrapper .button").click(function(){
       
           var inpObj = document.getElementById("form1");
          if (inpObj.checkValidity()) {
  
        var button = $(this);
        var currentSection = button.parents(".section");
        var currentSectionIndex = currentSection.index();
        var headerSection = $('.steps li').eq(currentSectionIndex);
        currentSection.removeClass("is-active").next().addClass("is-active");
        headerSection.removeClass("is-active").next().addClass("is-active");



        $(".form-wrapper").submit(function(e) {
         e.preventDefault();
        });
        if(currentSectionIndex === 0){
          $(document).find("#section2").addClass("is-active");      
        }
        if(currentSectionIndex === 2){
          $(document).find("#form2 .section").addClass("is-active");
          $(document).find(".steps li").first().addClass("is-active");
        }
        }
      });
      
    });

html, body{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: 'Open Sans', sans-serif;
      background-color: #3498db;
    }

    h1, h2, h3, h4, h5 ,h6{
      font-weight: 200;
    }

    a{
      text-decoration: none;
    }

    p, li, a{
      font-size: 14px;
    }

    fieldset{
      margin: 0;
      padding: 0;
      border: none;
    }

    /* GRID */

    .twelve { width: 100%; }
    .eleven { width: 91.53%; }
    .ten { width: 83.06%; }
    .nine { width: 74.6%; }
    .eight { width: 66.13%; }
    .seven { width: 57.66%; }
    .six { width: 49.2%; }
    .five { width: 40.73%; }
    .four { width: 32.26%; }
    .three { width: 23.8%; }
    .two { width: 15.33%; }
    .one { width: 6.866%; }

    /* COLUMNS */

    .col {
        display: block;
        float:left;
        margin: 0 0 0 1.6%;
    }

    .col:first-of-type {
      margin-left: 0;
    }

    .container{
      width: 100%;
      max-width: 700px;
      margin: 0 auto;
      position: relative;
    }

    .row{
      padding: 20px 0;
    }

    /* CLEARFIX */

    .cf:before,
    .cf:after {
        content: " ";
        display: table;
    }

    .cf:after {
        clear: both;
    }

    .cf {
        *zoom: 1;
    }

    .wrapper{
      width: 100%;
      margin: 30px 0;
    }

    /* STEPS */

    .steps{
      list-style-type: none;
      margin: 0;
      padding: 0;
      background-color: #fff;
      text-align: center;
    }


    .steps li{
      display: inline-block;
      margin: 20px;
      color: #ccc;
      padding-bottom: 5px;
    }

    .steps li.is-active{
      border-bottom: 1px solid #3498db;
      color: #3498db;
    }

    /* FORM */

    .form-wrapper .section{
      padding: 0px 20px 30px 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #fff;
      opacity: 0;
      -webkit-transform: scale(1, 0);
      -ms-transform: scale(1, 0);
      -o-transform: scale(1, 0);
      transform: scale(1, 0);
      -webkit-transform-origin: top center;
      -moz-transform-origin: top center;
      -ms-transform-origin: top center;
      -o-transform-origin: top center;
      transform-origin: top center;
      -webkit-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      text-align: center;
      position: absolute;
      width: 100%;
      min-height: 300px
    }

    .form-wrapper .section h3{
      margin-bottom: 30px;
    }

    .form-wrapper .section.is-active{
      opacity: 1;
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
    }

    .form-wrapper .button, .form-wrapper .submit{
      background-color: #3498db;
      display: inline-block;
      padding: 8px 30px;
      color: #fff;
      cursor: pointer;
      font-size: 14px !important;
      font-family: 'Open Sans', sans-serif !important;
      position: absolute;
      right: 20px;
      bottom: 20px;
    }

    .form-wrapper .submit{
      border: none;
      outline: none;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }

    .form-wrapper input[type="text"],
    .form-wrapper input[type="password"]{
      display: block;
      padding: 10px;
      margin: 10px auto;
      background-color: #f1f1f1;
      border: none;
      width: 50%;
      outline: none;
      font-size: 14px !important;
      font-family: 'Open Sans', sans-serif !important;
    }

    .form-wrapper input[type="radio"]{
      display: none;
    }

    .form-wrapper input[type="radio"] + label{
      display: block;
      border: 1px solid #ccc;
      width: 100%;
      max-width: 100%;
      padding: 10px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      cursor: pointer;
      position: relative;
    }

    .form-wrapper input[type="radio"] + label:before{
      content: "✔";
      position: absolute;
      right: -10px;
      top: -10px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 100%;
      background-color: #3498db;
      color: #fff;
      display: none;
    }

    .form-wrapper input[type="radio"]:checked + label:before{
      display: block;
    }

    .form-wrapper input[type="radio"] + label h4{
      margin: 15px;
      color: #ccc;
    }

    .form-wrapper input[type="radio"]:checked + label{
      border: 1px solid #3498db;
    }

    .form-wrapper input[type="radio"]:checked + label h4{
      color: #3498db;
    }

<html >
    <head>
      <meta charset="UTF-8">
      <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
    <script>
   
    </script>
    <style>
   
    </style>  
    </head>

    <body>
        <div class="container">
        <div class="wrapper">
          <ul class="steps">
            <li class="is-active">Step 1</li>
            <li>Step 2</li>
          </ul>
          <form class="form-wrapper"  id="form1">
            <fieldset class="section is-active">
              <h3>Your Details</h3>
              <input type="text" name="name" id="name" placeholder="Name" required>
              <input type="text" name="email" id="email" placeholder="Email" required>
              
               <button class="button">Next</button>
            </fieldset>
            </form>
              <form class="form-wrapper" id="form2">
            <fieldset class="section" id="section2">
              <h3>Choose a Password</h3>
              <input type="password" name="password" id="password" placeholder="Password">
              <input type="password" name="password2" id="password2" placeholder="Re-enter Password">
              <input class="submit button" type="submit" value="Sign Up">
            </fieldset>
            <fieldset class="section" id="section3">
              <h3>Account Created!</h3>
              <p>Your account has now been created.</p>
              <div class="button">Reset Form</div>
            </fieldset>
          </form>
        </div>
      </div>
    </body>
    </html>

Answer 3

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title -->
    <title>Step 1</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/dropzone.css"> -->
    <style>
.err{
     color: red;
    font-size: 12px;
}
</style>



</head>

<body>
    <!-- Login Start -->
    <div class="container mycontainer1">
        <div class="step-header">
            <div class="mainbox">
                <div class="logo-img"> <img src="img/SMECSY-logo.png" class="img-fluid">
                    <h6 class="mt-3">Welcome To RMS</h6>
                    <p>The new way to design your home</p>
                </div>
                <div class="pagination-text">
                     <h4>STEP <span id="spancounter"></span>/4</h4>  </div>
            </div>
             <form id="registrationForm" action=""  method="POST" > 
            <div class="content-part">
                <!-- slide 1 -->
                <div id="slide1" class="row selected all-slides">
                    <div class="quote col-md-5">
                        <p><img src="img/leaf.png" width="25"></p> <span>"The product was good, they showed<br>up on time so what more could you<br>ask for."</span>
                        <div class="home-owner">
                            <p>Linda Matejceck</p>
                            <p>- Homeowner</p>
                        </div>
                    </div>
                      <div class="yournamebox col-md-7">
                        <label>Enter Your Details</label>
                        <div class="form-group user-main mt-4">
                            <input class="effect-3 form-control usename-box" type="text" placeholder="Name"  id="name" name="user_name"> <span class="focus-border" id="name_error"></span><span id="name_error" class="err" style="display:none;">Please Fill Out Name</span> </div>

                         <div class="form-group user-main mt-4">
                            <input class="effect-3 form-control usename-box" type="email"   id="email"placeholder="Email" name="user_email" onfocusout="email_exists()"> <span id="email_error" class="focus-border"></span></div><span id="email_exists_error" class="err" style="display:none;">Email already exists</span><span id="email_invalid_error" class="err" style="display:none;">Email Invalid</span>

                        <div class="form-group user-main mt-4">
                            <input class="effect-3 form-control usename-box" type="password" id="password" placeholder="password" name="user_password"> <span id="password_error" class="focus-border"></span> <span id="password_error" class="err" style="display:none;">Please Fill Out Password</span> </div>
                            <span id="password_error" class="err" style="display:none;">Please Fill Out Password</span>
                    </div>

                </div>
                <!-- Slide one over-->
                <!-- Slide 2 -->
                <div id="slide2" class="row all-slides" style="display: none;">
                    <div class="quote2 col-md-5">
                        <p><img src="img/leaf.png" width="25"></p> <span>"The product was good, they showed<br>up on time so what more could you<br>ask for."</span>
                        <div class="home-owner">
                            <p>Linda Matejceck</p>
                            <p>- Homeowner</p>
                        </div>
                    </div>
                    <div class="your-business col-md-7">
                        <label>What's Business?</label>
                        <div class="form-row">
                            <div class="form-group col-md-6 user-main">
                                <input type="text" class="effect-3 form-control usename-box" name="compney_name" placeholder="Professional/Compney Name"> <span class="focus-border"></span> </div>
                            <div class="form-group col-md-6 user-main">
                                <select name="category" id="inputState" class="form-control effect-3 usename-box">
                                    <option selected >php</option>
                                    <option>android</option>
                                </select> <span class="focus-border"></span> </div>
                        </div>
                        <div class="compney-type">
                            <h6>Compney Type</h6> </div>
                        <div class="form-row">
                            <div class="col-md-6 form-group ">
                                    <label class="containerr">Local Professional
                                      <input type="radio" checked="checked"  value="Local Professional"name="compney_type">
                                      <span class="checkmark"></span>
                                    </label>
                                     <label class="containerr">Local retailer or Showroom
                                      <input type="radio"  value="Local retailer or Showroom"name="compney_type">
                                      <span class="checkmark"></span>
                                    </label>
                            </div>
                            <div class="col-md-6 form-group ">
                                <label class="containerr">Brand of Manufacturer
                                      <input type="radio" value="Brand of Manufacturer"name="compney_type">
                                      <span class="checkmark"></span>
                                    </label>
                                    <label class="containerr">Online retailer or Indipendent Seller
                                      <input type="radio" value="Online retailer or Indipendent Seller"name="compney_type">
                                      <span class="checkmark"></span>
                                    </label>
                            </div>
                        </div>
                         <div class="form-group col-md-6 user-main">
                                 <div class="business-pic">
                                        <div class="file-upload">
                                            <i class="fas fa-cloud-upload-alt"></i>
                                             <label for="upload" class="file-upload__label">&nbsp;&nbsp;&nbsp;upload </label>
                                                <input id="upload" class="file-upload__input" type="file" name="files"> 
                                        </div>
                                    </div>
                            </div>
                    </div>
                </div>
                <!-- Slide 2 Over -->
                <!-- Slide 3 -->
              <!-- Slide 3 -->
                <div id="slide3" class="row all-slides" style="display: none;">
                    <div class="quote3 col-md-5">
                        <p><img src="img/leaf.png" width="25"></p> <span>"The product was good, they showed<br>up on time so what more could you<br>ask for."</span>
                        <div class="home-owner">
                            <p>Linda Matejceck</p>
                            <p>- Homeowner</p>
                        </div>
                    </div>
                     <div class="your-business col-md-7">
                        <label>Hi <span id="name_temp"></span>   Are you looking to schedule a service or
                            <br> buy a product?</label>
                        <div class="seclect-product">
                            <div class="main-boxstep">
                                <div class="box1">
                                    <div class="product-box" id="1" onclick="select_service(this)"> <img src="img/vendor.png" width="90">
                                        <p>BY A PRODUCT</p>
                                    </div>
                                </div>
                                <div class="box2">
                                    <div class="product-box" id="2" onclick="select_service(this)"> <img src="img/contractor.png" width="90">
                                        <p>SCHEDULE A SERVICE</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Slide 3 Over -->




                  <!-- Slide 2-->
                    <div id="slide4" class="row all-slides slide-2-div" style="display: none;">
                        <div class="quote4 col-md-4">
                            <p><img src="img/leaf.png" width="25"></p> <span>"The product was good, they showed<br>up on time so what more could you<br>ask for."</span>
                            <div class="home-owner">
                                <p>Linda Matejceck</p>
                                <p>- Homeowner</p>
                            </div>
                        </div>
                        <div class="your-business col-md-8">
                            <label class="blog-main-heading-div">Select product which you want!</label>
                            <div class="d-flex justify-content-between mt-2 mb-4">
                                <div class="searchico step-4">
                                    <input type="text" class="srch-form-control1" placeholder="Search" id="serch_product"> <img src="img/search.png" class="img-search"> </div>
                                <div class="all-new-filter">
                                    <div class="new activeall">All</div>
                                  <!--  <div class="all">All</div> -->
                                </div>
                            </div>
                            <div class="product-table" id="product_data" style="border: 1px solid #ddd;">
                                <table class="responsive-table table table-striped table-fixed">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="chk-row">
                                                <label class="container-chkbox">
                                                    <input type="checkbox"> <span class="checkmark square-checkmark"></span> </label>
                                            </th>
                                            <th scope="col">ID</th>
                                            <th scope="col">product</th>
                                            <th scope="col">Status</th>
                                        </tr>
                                    </thead>

                                    <tbody>

                                    <?php foreach ($result->result() as $row) {

                                   ?>

                                        <tr>
                                            <th scope="row" class="chk-row">
                                                <label class="container-chkbox">
                                                    <input type="checkbox"  
                                                    name="product[]" value="<?php echo $row->product_id;?>"> <span class="checkmark square-checkmark"></span> </label>
                                            </th>
                                            <th id="product_id"><?php echo $row->product_id;?></th>
                                            <td>
                                                <div class="product-cell">
                                                    <div class="product-img"> <img src="img/air-conditioner-compressor.jpg" width="50"> </div>
                                                    <div class="productdetails">
                                                        <p class="productdetails-name-div"><?php echo $row->category;?></p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <button type="button"  class="active-btn">Active</button>
                                            </td>
                                        </tr>

                                     <?php }?> 
                                    </tbody>

                                </table>
                            </div>
                                <div class="Next-btn-div last">
                            <div class="form-group">
                                <button type="button" name="enter" class="next-btn " id="submit">Submit <i class="fas fa-caret-right nter-key"></i></button>
                            </div>
                        </div>
                    </div>
                <!-- Slide 2 Over -->
            </div>

             <div id="slide5" class="row all-slides slide-2-div" style="display: none;">
                        <div class="quote4 col-md-4">
                            <p><img src="img/leaf.png" width="25"></p> <span>"The service was good, they showed<br>up on time so what more could you<br>ask for."</span>
                            <div class="home-owner">
                                <p>Linda Matejceck</p>
                                <p>- Homeowner</p>
                            </div>
                        </div>
                        <div class="your-business col-md-8">
                            <label class="blog-main-heading-div">Select services which you want!</label>
                            <div class="d-flex justify-content-between mt-2 mb-4">
                                <div class="searchico step-4">
                                    <input type="text" class="srch-form-control1" id="serch_service" placeholder="Search"> <img src="img/search.png" class="img-search"> </div>
                                <div class="all-new-filter">
                                    <div class="new activeall">New</div>
                                    <div class="all">All</div>
                                </div>
                            </div>
                            <div class="product-table" id="service_data" style="border: 1px solid #ddd;">
                                <table class="responsive-table table table-striped table-fixed">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="chk-row">
                                                <label class="container-chkbox">
                                                    <input type="checkbox"> <span class="checkmark square-checkmark"></span> </label>
                                            </th>
                                            <th scope="col">ID</th>
                                            <th scope="col">service</th>
                                            <th scope="col">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                          <?php foreach ($result->result() as $row) {

                                   ?>

                                        <tr>
                                            <th scope="row" class="chk-row">
                                                <label class="container-chkbox">
                                                    <input type="checkbox"  
                                                    name="service_id[]" value="<?php echo $row->product_id;?>"> <span class="checkmark square-checkmark"></span> </label>
                                            </th>
                                            <th id="product_id"><?php echo $row->product_id;?></th>
                                            <td>
                                                <div class="product-cell">
                                                    <div class="product-img"> <img src="img/air-conditioner-compressor.jpg" width="50"> </div>
                                                    <div class="productdetails">
                                                        <p class="productdetails-name-div"><?php echo $row->category;?></p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <button type="button"  class="active-btn">Active</button>
                                            </td>
                                        </tr>

                                     <?php }?> 
                                    </tbody>
                                </table>
                            </div>
                                <div class="Next-btn-div last">
                            <div class="form-group">
                                <button type="button" name="enter" class="next-btn " id="submit2">submit <i class="fas fa-caret-right nter-key"></i></button>
                            </div>
                        </div>
                    </div>
                <!-- Slide 2 Over -->
            </div>
            <div class="Next-btn-div">
                <div class="form-group">
                    <button type="button" name="enter" class="next-btn " id="next">NEXT <i class="fas fa-caret-right nter-key"></i></button>
                </div>
            </div></form>
        </div>
    </div>
    <!-- Login End -->
</body>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script type="text/javascript">


</script>

<script type="text/javascript">


$(document).ready(function () {
 $('#serch_service').on("keypress", function(e) {
      var  serch_product = $('#serch_service').val();
          if (e.keyCode == 13) {

                $.ajax({
                        type: 'POST',
                        url: '<?php echo site_url();?>Business/service_serch_fetch',
                        data: 'text='+serch_product,
                        success: function(data){
                         var obj = JSON.parse(data);
                         $('#service_data').html('');
                         $('#service_data').html(obj.result);
                         }

                      });



            return false;
        }

});
});
</script> 
<script type="text/javascript">


$(document).ready(function () {

$("#upload").change(function(){

  var form_data = new FormData();
        var ins = document.getElementById('upload').files[0];

            form_data.append("files", ins);

        $.ajax({
            url:'<?php echo site_url();?>Business/get_regiter_data', 
            type: "POST",             
            data: form_data, 
            contentType: false,       
            cache: false,             
            processData:false,        
            success: function(data)   
            {
                // location.reload();
              //  $("#slide4").load(location.href + " #slide4");
            }
        });
});


});    


</script>

    <script type="text/javascript">

  $(document).ready(function(){
    var inc = 1;
    var $page=inc;
    $( "#next" ).click();
 $('#spancounter').html($page); 

  $("#next").click(function(e){

   $('#spancounter').html(inc);


   if(inc==1)
     {

        //alert("0");
         $("#slide1").show();
         $("#slide2").hide();
         $("#slide3").hide();
           $("#slide4").hide();
         $name=$("#name").val();
         $email=$("#email").val();
         $password=$("#password").val();
                  var pattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i;



                  if($name==''){


                      $("#name_error").addClass("activeborder");
                      e.preventDefault();
                      return;

                  }

                  else{
                    $("#name_error").removeClass("activeborder");
                }


                  var str=$email
                  var patt = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i;
                  if(!patt.test(str))
                  {
                     $("#email_error").addClass("activeborder");
                     $("#email_invalid_error").css("display", "block");
                    e.preventDefault();
                    return;
                  }

                   else{ $("#name_error").removeClass("activeborder"); 
                    $("#email_invalid_error").css("display", "none");
               }



                  if($email=='' ){

                  $("#email_error").addClass("activeborder");
                    e.preventDefault();
                    return;

                  }
                  else{


                    $("#email_error").removeClass("activeborder");

                  }

                  if($password==''){
                    $("#password_error").addClass("activeborder");
                    e.preventDefault();
                    return;
                  } 
                  else{

                     $("#password_error").removeClass("activeborder");
                  }

            inc++;
            $('#spancounter').html(inc);
     }




     if(inc==2)
      {
        //alert("1");
         $("#slide2").show();
         $("#slide3").hide();
         $("#slide1").hide();
           $("#slide4").hide();

      }
      if(inc==3)
      {
        //alert("2");
         $("#slide3").show();
         $("#slide2").hide();
         $("#slide1").hide();
           $("#slide4").hide();

      }
       if(inc==4)
      {

        if($(".product-box_sel").attr('id') == 1)
        {
         $("#slide4").show();
         $("#slide3").hide();
         $("#slide2").hide();
         $("#slide1").hide();
         $("#next").hide();}
        if($(".product-box_sel").attr('id') == 2)
         {

         $("#slide5").show();
         $("#slide3").hide();
         $("#slide2").hide();
         $("#slide1").hide();
         $("#next").hide();
         }

      }
      inc++;

  });

});

$(document).ready(function(){
  $("#submit").click(function(){
   $.ajax( {
                        url: "<?php echo site_url();?>Business/get_regiter_data",
                        method: "POST",
                        data: $("#registrationForm").serialize(),
                        dataType: "text",
                        success: function(strMessage) {
                       // alert("Registration success");

                        window.location.href = '<?php echo site_url();?>Login'; 
                        //  $(".Next-btn-div").hide();

                        }
                    });
  });
});
$(document).ready(function(){
  $("#submit2").click(function(){
   $.ajax( {
                        url: "<?php echo site_url();?>Business/get_regiter_data",
                        method: "POST",
                        data: $("#registrationForm").serialize(),
                        dataType: "text",
                        success: function(strMessage) {
                       // alert("Registration success");

                        window.location.href = '<?php echo site_url();?>Login'; 
                        //  $(".Next-btn-div").hide();

                        }
                    });
  });
});
</script>
<script type="text/javascript">
        $("#name").focusout(function(){
        $("#name_temp").html($("#name").val());
});
 function email_exists()
{
    if($("#email").val()!='')
    {
    $.ajax({
        type: 'POST',
        url: '<?php echo site_url();?>Business/register_email_exists',
        data: 'email='+$("#email").val(),
        success: function(data){
         var obj = JSON.parse(data);
         if(obj['msg']==1)
             {
             $("#email").focus();
                $("#email_exists_error").css("display", "block");


             }
             else
             {
                $("#email_exists_error").css("display", "none"); 
             }
         }
     });
     } 
    }
    </script>
    <script type="text/javascript">




</html>