Ingen beskrivning
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

form-old.js 4.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. $(document).ready(function () {
  2. let formHTML = ` <!-- pop up -->
  3. <!-- enquire-form pop up -->
  4. <div class="modal fade style" id="enquireModal" tabindex="-1" role="dialog">
  5. <div class="modal-dialog modal-dialog-centered" role="document">
  6. <div class="modal-content">
  7. <div class=" justify-content-center ">
  8. <!-- <h5 class="modal-title" id="itemTitle"> </h5> -->
  9. <button type="button" class="close" data-bs-dismiss="modal" style="color: black;" >
  10. <span >&times;</span>
  11. </button>
  12. </div>
  13. <div class="modal-body" id="myModal">
  14. <div class="contact-form-content">
  15. <h3 class="contact-page-title">Buy Now</h3>
  16. <div class="contact-form">
  17. <form id="contact-form" name="enquire_form" >
  18. <div class="form-group">
  19. <input type="text" placeholder="Your Name" name="name" id="usernames" onblur="submit_enquiry()" required />
  20. <small id="usercheck" style="color: red;" >
  21. *Username is missing
  22. </small>
  23. </div>
  24. <div class="form-group">
  25. <input type="text" placeholder="Product" name="Title" id="itemTitle" disabled />
  26. </div>
  27. <div class="form-group">
  28. <input type="email" placeholder="Email-Id" name="email" id="email" onblur="submit_enquiry()" required/>
  29. <small id="emailvalid" class="form-text
  30. text-muted invalid-feedback">
  31. Your email must be a valid email
  32. </small>
  33. </div>
  34. <div class="form-group">
  35. <input type="phone" placeholder="Mobile No" name="phone" id="phone" onblur="submit_enquiry()" required/>
  36. </div>
  37. <div class="form-group">
  38. <input type="text" placeholder="subject" name="subject" id="subject" required />
  39. </div>
  40. <div class="form-group">
  41. <textarea name="contactMessage" placeholder="Your Message" class="pb-10" id="contactMessage" required></textarea>
  42. </div>
  43. <div class="form-group mb-0">
  44. <button type="submit" value="submit" id="submitbtn" class="btn btn-dark btn--lg " name="submit" onclick="submit_enquiry()">
  45. submit
  46. </button>
  47. </div>
  48. </form>
  49. </div>
  50. <!-- <p class="form-message mt-10"></p> -->
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <!-- end popup -->`
  57. $("#enquire").html(formHTML);
  58. // Document is ready
  59. $(document).ready(function () {
  60. // Validate Username
  61. $('#usercheck').hide();
  62. let usernameError = true;
  63. $('#usernames').keyup(function () {
  64. validateUsername();
  65. });
  66. function validateUsername() {
  67. let usernameValue = $('#usernames').val();
  68. if (usernameValue.length == '') {
  69. $('#usercheck').show();
  70. usernameError = false;
  71. return false;
  72. } else if ((usernameValue.length < 3) ||
  73. (usernameValue.length > 10)) {
  74. $('#usercheck').show();
  75. $('#usercheck').html("*length of username must be between 3 and 10");
  76. usernameError = false;
  77. return false;
  78. } else {
  79. $('#usercheck').hide();
  80. }
  81. }
  82. // Validate Email
  83. const email =
  84. document.getElementById('email');
  85. email.addEventListener('blur', () => {
  86. let regex =
  87. /^([_\-\.0-9a-zA-Z]+)@([_\-\.0-9a-zA-Z]+)\.([a-zA-Z]){2,7}$/;
  88. let s = email.value;
  89. if (regex.test(s)) {
  90. email.classList.remove(
  91. 'is-invalid');
  92. emailError = true;
  93. } else {
  94. email.classList.add(
  95. 'is-invalid');
  96. emailError = false;
  97. }
  98. })
  99. // Submit button
  100. $('#submitbtn').click(function () {
  101. validateUsername();
  102. validateEmail();
  103. if ((usernameError == true) &&
  104. (passwordError == true) &&
  105. (emailError == true)) {
  106. return true;
  107. } else {
  108. return false;
  109. }
  110. });
  111. });
  112. function pop_up() {
  113. let title = $('.single-product-head').find('.title').text();
  114. // $('#itemTitle').text(title);
  115. // console.log(title);
  116. $('#itemTitle').val(title);
  117. }
  118. function submit_enquiry() {
  119. // alert("awsdfa");
  120. if (enquire_form.name.value.length == 0) {
  121. document.getElementById('errName');
  122. }
  123. if (enquire_form.email.value.length == 0) {
  124. document.getElementById('errEmail');
  125. }
  126. }
  127. pop_up();
  128. submit_enquiry()
  129. })