禁用Java表单验证，无需任何框架即可提交

Question

我正在尝试将自己的表单验证添加到此表单。 目的是最终拥有以下规则：

• 如果电子邮件无效，则显示错误。
• 如果文本区域<50个字符，则显示错误。
• 如果所有输入均无效，请禁用提交。

我的首要目标是禁用提交。 我尝试了Internet中提供的许多解决方案。 不幸的是，没有成功。 我的最后尝试是受此帖子启发的： 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;

我发现的是，在页面加载时始终会调用alert（“ false”）（用于调试目的），即使此事件与onclick事件链接也是如此。 此外，我从未实现过触发alert（“ true”）。

Answer 1

您通过调用错误的函数来定义onclick事件。 您只需要在不带()函数引用中使用它，如下所示：

awesome.onclick = formValidation;

我想你的按钮禁用也可以然后:)