new.anwisystems.com/enterprise/assets/js/form.js

$(document).ready(function () {
  let formHTML = `  <!-- pop up -->
    <!-- enquire-form pop up -->
    <div class="modal fade style" id="enquireModal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="wrap-contact100">
          
        <div class="modal-content contact100-form validate-form">
          <div class=" justify-content-center ">
            <!-- <h5 class="modal-title" id="itemTitle"> </h5> -->
            <button type="button" class="close" data-bs-dismiss="modal" >
              <span >&times;</span>
            </button>
          </div>
           <div class="row w-100">
          <div class="enquire-form-img col-md-6 col-12">
          </div>
      <div class="enquire-form col-md-6 col-12 py-5 px-30">
         <div>
              <h3 class="contact-page-title">Request a Quote</h3>
        </div>
        <div>
        <div id="pageloader" class="d-none">
                                <img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif"
                                    alt="processing..." />
                            </div>
        <form id="anwi-enquire-form" method="POST" action="quote-request.php">
          <div class="form-floating ">
            <input type="text" class="form-control" id="userName" name="name" placeholder="name@example.com" onblur="submit_enquiry()" required>
            <label for="name">Your Name</label>
          </div>
          <div class="form-floating">
            <input type="text" class="form-control" id="itemTitle" name="Title" placeholder="Password" disabled>
            <label for="name">Product</label>
          </div>
          <div class="form-floating ">
            <input type="email" class="form-control" id="floatingEmail" name="email" placeholder="name@example.com" onblur="submit_enquiry()" required>
            <label for="floatingEmail">Email address</label>
          </div>
          <div class="form-floating">
            <input type="number" class="form-control" id="floatingPhonenumber" name="phone" placeholder="Password" onblur="submit_enquiry()" required>
            <label for="floatingPhonenumber">Mobile No</label>
          </div>
          <div class="form-floating ">
            <input type="text" class="form-control" id="floatingSubject" name="subject" placeholder="name@example.com"  required>
            <label for="floatingSubject">Subject</label>
          </div>
          <div class="form-floating">
            <textarea name="contactMessage" class="form-control" id="contactMessage" name="message" placeholder="Your Message" required style="height:100px"></textarea>
            <label for="floatingPassword">Message</label>
          </div>
          <div class="form-floating text-center my-4">
            <button type="submit" value="submit" id="submitbtn" class="btn btn-primary btn--lg " name="submit" onclick="submit_enquiry()">
              submit
            </button>
          </div>
        </form>
        </div>
      </div>
    </div>
        </div>
        </div>
      </div>
    </div>
  <!-- end popup -->`;

  $("#enquire").html(formHTML);

  // Document is ready
  $(document).ready(function () {
    // Validate Username
    $("#usercheck").hide();
    let usernameError = true;
    $("#usernames").keyup(function () {
      validateUsername();
    });

    function validateUsername() {
      let usernameValue = $("#usernames").val();
      if (usernameValue.length == "") {
        $("#usercheck").show();
        usernameError = false;
        return false;
      } else if (usernameValue.length < 3 || usernameValue.length > 10) {
        $("#usercheck").show();
        $("#usercheck").html("*length of username must be between 3 and 10");
        usernameError = false;
        return false;
      } else {
        $("#usercheck").hide();
      }
    }

    // Validate Email
    const email = document.getElementById("email");
    email.addEventListener("blur", () => {
      let regex = /^([_\-\.0-9a-zA-Z]+)@([_\-\.0-9a-zA-Z]+)\.([a-zA-Z]){2,7}$/;
      let s = email.value;
      if (regex.test(s)) {
        email.classList.remove("is-invalid");
        emailError = true;
      } else {
        email.classList.add("is-invalid");
        emailError = false;
      }
    });

    // Submit button
    $("#submitbtn").click(function () {
      validateUsername();
      validateEmail();
      if (
        usernameError == true &&
        passwordError == true &&
        emailError == true
      ) {
        return true;
      } else {
        return false;
      }
    });
  });

  function pop_up() {
    let title = $(".single-product-head").find(".title").text();
    //  $('#itemTitle').text(title);
    // console.log(title);
    $("#itemTitle").val(title);
  }

  function submit_enquiry() {
    // alert("awsdfa");
    if (enquire_form.name.value.length == 0) {
      document.getElementById("errName");
    }
    if (enquire_form.email.value.length == 0) {
      document.getElementById("errEmail");
    }
  }
  pop_up();
  submit_enquiry();

  $("#anwi-enquire-form").validate({
    rules: {
      phone: {
        minlength: 10,
        maxlength: 10,
        number: true,
      },
    },
    submitHandler: function (form) {
      loader();
      $.ajax({
        type: "POST",
        url: "quote-request.php",
        data: $(form).serialize(),
        success: function (res) {
          if (res == 1) {
            toastr.success("Form Submitted Successfully!");
            $(form).trigger("reset");
            $(form)
              .find(".form-control-placeholder")
              .removeClass("floating-label");
            $("#pageloader").remove();
            $("#anwi-enquire-form").removeClass("d-none");
          } else {
            toastr.error("Something Went Wrong,Try Again!");
            $("#pageloader").remove();
            $("#anwi-enquire-form").removeClass("d-none");
          }
        },
      });
      return false;
    },
  });

  function loader() {
    //$("#biz-contact-form").on("submit", function () {
    $("#pageloader").fadeIn();
    $("#anwi-enquire-form").addClass("d-none");
    //});
    //submit
  }
});