Agfdhyk

I am trying to add my own form validation to this form. The aim is at the end to have these rules:

• If email not valid, display an error.


• If text area < 50 char, display an error.


• If all inputs are invalid, disable the submit.

My first aim is to disable the submit. I tried this with many solutions found in the Internet. Unfortunately, without success. My last try is inspired by this post: https://www.plus2net.com/javascript_tutorial/form-submit-demo.php.

This is my form:

<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>

This is my JS (with a first try with the first question of the form):

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;

What I discovered is that alert("false"), which is here for debugging purposes) will always be called when the page load, even if this is linked with an onclick event. Furthermore, I never achieved to trigger alert("true").

You define onclick events by calling functions which is wrong.
You need to just use it with function reference without () like that:

awesome.onclick = formValidation;

I guess your button disabling will also work then :)