Проверка формы Javascript отключена без каких-либо рамок - PullRequest
Новая
       9

Проверка формы Javascript отключена без каких-либо рамок

0 голосов
/ 20 ноября 2018

Я пытаюсь добавить свою собственную проверку формы в эту форму.В конце цель состоит в том, чтобы иметь эти правила:

  • Если адрес электронной почты недействителен, отобразить ошибку.
  • Если текстовая область <50 символов, отобразить ошибку. </li>
  • Если все данные неверны, отключите отправку.

Моя первая цель - отключить отправку.Я попробовал это со многими решениями, найденными в Интернете.К сожалению, без успеха.Моя последняя попытка вдохновлена ​​этим сообщением: https://www.plus2net.com/javascript_tutorial/form-submit-demo.php.

Это моя форма: 

<form name="myForm" action="##" method="post"> 
                        <div class="margin_b">
                            <div class="opinion-radio margin_b">
                                <span class="label-left">How do you like our pizza?</span> <!-- First element of the form -->
                                <div class="checkbox-style inputs-right">
                                    <input id="awesome" type="radio" name="review" value="awesome">
                                    <label for="awesome" class="margin-right">Awesome</label>
                                    <input id="good" type="radio" name="review" value="good">
                                    <label for="good" class="margin-right">Good</label>
                                    <input id="ok" type="radio" name="review" value="ok">
                                    <label for="ok"class="margin-right">Ok</label>
                                    <input id="poor" type="radio" name="review" value="poor">
                                    <label for="poor">Poor</label>
                                </div>
                                <span id="error-review" class="label-left error">Please select a response.</span>
                            </div>
                            <div class="opinion-radio">
                                <span class="inline, label-left">What do you think about our prices?</span> <!-- Second element of the form -->
                                <div class="checkbox-style inputs-right">
                                    <input id="fair" type="radio" name="reviewprice" value="fair">
                                    <label for="fair" class="margin-right">Fair</label>
                                    <input id="okay" type="radio" name="reviewprice" value="okay">
                                    <label for="okay" class="margin-right">Okay</label>
                                    <input id="expensive" type="radio" name="reviewprice" value="expensive">
                                    <label for="expensive">Expensive</label>
                                </div>
                                <span id="error-reviewprice" class="label-left error">Please select a response.</span>
                            </div>
                        </div>
                        <div class="margin_b">
                            <label for="name" class=" label-left">Your name:</label> <!-- Third element of the form -->
                            <input type="text" id="name" name="user_name" class="inline inputs-right">
                            <span id="error-name" class="error label-left">Please add a name.</span>
                        </div>
                        <div class="margin_b">
                            <label for="name" class=" label-left">Your e-mail address:</label> <!-- Fourth element of the form -->
                            <input type="email" id="email" name="user_email" class="inline inputs-right">
                            <span id="error-email" class="label-left error">Please add a correct email.</span>
                        </div>
                        <div class="margin_b">
                            <label for="msg" class="label-left">What can we do better :</label> <!-- Fifth element of the form -->
                            <textarea id="msg" name="user_message" class="inline inputs-right"></textarea>
                            <span id="error-text" class="label-left error">Please add a correct text of at least 50 characters.</span>
                        </div>
                        <div class="align-right">
                            <input type="submit" value="Submit" id="btnsubmit">
                        </div>
                    </form>

Это мой JS (с первой попыткой с первым вопросом формы):

function formValidation() { 

t1ck=true;

if (!document.getElementById("awesome").checked && !document.getElementById("good").checked && !document.getElementById("ok").checked && !document.getElementById("poor").checked ) { 
    alert("false");
    t1ck=false;
}

if (t1ck == false) {
    var btnsubmit = document.getElementById("btnsubmit");
    btnsubmit.disabled = true;
    btnsubmit.style.backgroundColor = "grey";
} else {
    t1ck=true;
    alert("true");
    btnsubmit.disabled = false; 
    } 
}

function submitCheck() {

  var awesome = document.getElementById("awesome"); 
  var good = document.getElementById("good"); 
  var ok = document.getElementById("ok"); 
  var poor = document.getElementById("poor");

  t1ck=false;
  document.getElementById("btnsubmit").disabled = true;

  awesome.onclick = formValidation(); 
  good.onclick = formValidation(); 
  ok.onclick = formValidation();
  poor.onclick = formValidation(); 
} 
window.onload = submitCheck;

Я обнаружил, что оповещение («ложь»), которое используется здесь для целей отладки), всегда будет вызываться при загрузке страницы, даже если это связано с событием onclick.Более того, я так и не смог активировать оповещение («истина»).

1 Ответ

0 голосов
/ 20 ноября 2018

Вы определяете события onclick, вызывая функции, что неправильно.Вам нужно просто использовать его со ссылкой на функцию без (), например: 

awesome.onclick = formValidation;

Полагаю, отключение вашей кнопки также сработает:)

...