Проверки HTML5 не работают

javascript jquery html5

56 просмотра

2 ответа

Я сделал контактную форму. В этой форме я добавил проверки ввода, такие как электронная почта для текстового поля электронной почты и максимальная длина для номера телефона 10 в текстовом поле контакта. Но эти проверки не работают в моем случае.
Что я делаю не так?

AJAX Call

function myformsubmit() {
    var name = document.getElementById("name").value;
    var mail = document.getElementById("mail").value;
    var contact = document.getElementById("contact").value;
    var reason = document.getElementById("reason").value;
    // Returns successful data submission message when the entered information is stored in database.
    var dataString = 'name1=' + name + '&mail1=' + mail + '&contact1=' + contact+ '&reason1=' + reason;

    if (name == ''||mail == ''|| reason == ''||contact == ''){
        alert("Please Fill all fields");
    }else{
        // AJAX code to submit form.
        $.ajax({
            type    : "POST",
            url     : "http://test1.com/wp-content/themes/suave/theme_option/1.php",
            data    : dataString,
            cache   : false,
            success : function(html) {
                alert(html);
                window.location="http://test1.com";
            }
        });
    }
    return false;
}

@media screen and (max-width: 972px) and (min-width: 100x) {
  .exitpopup-modal-window {
    display: none;
  }
}
#exitpopup-modal .modal-body {
  padding: 0px;
}
.modal-body {
  padding: 0px;
}
.second img {
  width: 369px;
  height: 404.6px;
  margin-top: -1%;
}
.first form {
  display: table;
  margin-left: 34px;
  margin-top: 43px;
}
.row1 {
  font-size: 10px;
  font-family: inherit;
  display: table-row;
  border: 2px solid red;
}
.row1 #name,
#mail,
#contact {
  color: black;
  width: 260px;
  height: 34px;
  padding: 6px 12px;
  border-radius: 3.9px;
  border-color: #777;
  display: table-cell;
}
.row1 textarea {
  width: 260px;
  height: 110px;
  color: black;
  border-color: #777;
  display: table-cell;
}
.row1 #submit {
  width: 152px;
  height: 44px;
  margin-left: 15%;
  background-color: #337ab7;
  color: white;
  border-color: none;
}
.row1 #submit:hover {
  width: 152px;
  height: 44px;
  margin-left: 15%;
  background-color: white;
  color: #337ab7;
  border-color: none;
}
.second,
.first {
  float: left;
}
.clearfix {
  clear: both
}
.first span {
  margin-left: 25%;
  font-family: inherit;
  font-size: 15px;
  padding-top: 3px;
}
<div class="exitpopup-modal-window">
  <div class="second">
    <img src="http://www.buildzar.com/listing-assets/images/home-new/get-quote/bg-lead-form-web.png">
  </div>
  <div class="first">
    <span>We are there to help you</span>
    
<form id="form" name="theform">
      <div class="row1">
        <input id="name" type="text" placeholder="Your name *" required>
        <br>
        <br>
      </div>
      <div class="row1">
        <input type="email" id="mail" placeholder="Your email *" required>
        <br>
        <br>
      </div>
      <div class="row1">
        <input id="contact" type="number" maxlength="10" placeholder="Your  phonenumber*" required>
        <br>
        <br>
      </div>
      <div class="row1">
        <textarea id="reason" rows="5" placeholder="Any reason to leave ?*" required></textarea>
        <br>
        <br>
      </div>
      <div class="row1">
        <input id="submit" onclick="myformsubmit()" type="button" value="Submit">
      </div>
    </form>
  </div>
  <div class="clearfix"></div>

Автор: Aryan Kanwar Источник Размещён: 08.11.2019 10:59

Ответы (2)


2 плюса

Решение

Ваш тип кнопки должен быть отправлен.

 <input id="submit"  type="submit" value="Submit">

А внутри тега у вас должно быть действие

<form id="form" name="theform" action="javascript:myformsubmit()">
Автор: Ruhul Размещён: 20.08.2016 07:02

1 плюс

Создайте новую функцию и вызовите ее из вашей функции myformsubmit.

    function checkvalidate() {
    var flag = false;
    if (name == ''||mail == ''|| reason == ''||contact == ''){
            flag = false;
        }
else
{
flag = true;
}
    return flag;
    function myformsubmit() {
            var flag = checkvalidate();
            if(flag == true)
    {
    success code.
    }
    else
    {
    error message
    }

    }
Автор: DBB Размещён: 20.08.2016 07:43
Вопросы из категории :
32x32