1

*Edit: Fixed so that all inputs are now validated on one form. However, I can only add one variable to check if blank, as soon as I add more, none of the submit functions work. I have been trying multiple things.

function validateForm() {
  var inputVelocity = document.getElementById("dzCalculator").inputVelocity.value;
  var inputYellowPhase = document.getElementById("dzCalculator").inputYellowPhase.value;
  var inputRedPhase = document.getElementById("dzCalculator").inputInterPhase.value;
  var inputReactionTime = document.getElementById("dzCalculator").inputReactionTime.value;
  if(inputVelocity === "" && inputYellowPhase === "" && inputRedPhase === "" && inputReactionTime === ""){
    alert("Input all fields to calculate.");
    return false;
  }
}

I have checked the HTML matches - it does. But I found I could not use onsubmit="return validateForm" as this wouldn't work at all.

This is only 4 of the form values, there are seven all up. But when I can get the four working, I can get them all working.

How can I use JS to make sure that no input is left blank or empty? I already have made it so that it will only accept numbers and decimal points. So no one can add an incorrect field. But currently, they can leave a field blank which means my calculator generates a NaN response.

Also, how can I make sure one of my fields can not accept a number greater than 1 or less than 0. I tried min="0" max="1" in the input tag, but because I have removed spinners, this doesn't work.

So, in summary, I am looking to make sure when a button is clicked that all the form sections are filled in and that one of the fields doesn't accept a number greater that 1 or less than zero.

Improve this question

4 Answers 4

Reset to default
2

there are 2 options for this.

  • You can select all the inputs (inside the form tag) using querySelector and check the value of each input by looping through them.
  • use this trick selector to get all the invalid inputs document.querySelectorAll('input:not([value]):not([value=""])'); replace input with more precise selector.
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I like very much the second way. I do my self a simple #IdOfForm *:invalid
0

Can you please give more detail about how your form is in multiple places?

For input I think you need to use step attribute

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#step

Improve this answer

2 Comments

I've now edited the code so that there is one <form> only and I can get the code to work for reset and calculate. But still none of the "required" attributes work.
Also, step is great, but it doesn't work unless you have the spinners on the number input. I removed them.
0

Reference: javascript_form_validation

Depends when would you like to validate form fields

For example: Form validation on submit

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
<html>

<body>
  <form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
    Name: <input type="text" name="fname">
    <input type="submit" value="Submit">
  </form>
</body>

</html>

Give name to your form using name attribute such as <form name="myForm" ..>

Then using document.forms["myForm"] you can have access to your form

There you can validate your input fields value. return true if validates

Improve this answer

1 Comment

This script from W3 schools I tried - it just doesn't work in this case. I have multiple form inputs all over the place and for some reason, when I remove them, and try to make one form, it doesn't work.
0

This works for me. You can use it, style it however you want or not. You do need JQuery. It has powerful selectors.

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
    
    body{
        font-size: 12px;
    }

    .main-container{
        display: flex;    /* DO NOT CHANGE */
        height: 100vh;    /* DO NOT CHANGE */
        width: 100%;      /* DO NOT CHANGE */
    }

    .c-message{
        display: flex;    /* DO NOT CHANGE */
        position: fixed;  /* DO NOT CHANGE */
        top: 0px;         /* DO NOT CHANGE */
        left: 0px;        /* DO NOT CHANGE */
        width: 100%;      /* DO NOT CHANGE */
        height: 100%;     /* DO NOT CHANGE */
    }

    .c-msgbox{
        padding: 30px;
        text-align: center;
        margin: auto; /* DO NOT CHANGE */
        background-color: #e4e4e4;
        border-radius: 4px;
        border: 1px solid #adadad;
        -webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);
        -moz-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.40);
    }

    .standerd-button2{
        border: none;
        font-family: arial,helvetica,clean,sans-serif;
        font-size: 10px;
        font-weight: 600;
        color: white;
        background: #1A709F;
        padding: 3px;
        text-align: center;
        vertical-align: middle;
        -webkit-border-radius: 3px;
        width: max-content;
        min-width: 50px;
        margin: 2px;
    }

    .standerd-button2:hover{
        background: crimson;
        cursor: default;
    }

    .f-table {
        display: table;
        width: max-content;
        padding: 5px;
        border-spacing: 2px;
    }

    .f-tablerow {
        display: table-row;
    }    

    .f-tablecell{
        display: table-cell;
    }    

    .label-cell-r{
        text-align: right;
    }
    
    .dd-required{
        margin: auto;
        color: red;
    } 

    input, select{
        border: 1px solid lightgrey;
    }   


</style>
<script type="text/javascript" src="JQuery.js"></script>
</head>
<body>
<div class="main-container">
    <div>
        <form id="f1" name="f1">
            <div class="f-table">
                <div class="f-tablerow">
                    <div class="f-tablecell label-cell-r">
                        <label for="firstname">First Name</label>
                    </div>
                    <div class="f-tablecell input-cell">
                        <input id="firstname" name="firstname" type="text" data-er="First Name"/>
                        <span class='dd-required'>*</span>
                    </div>
                </div>
                <div class="f-tablerow">
                    <div class="f-tablecell label-cell-r">
                        <label for="lastname">Last Name</label>
                    </div>
                    <div class="f-tablecell input-cell">
                        <input id="lastname" name="lastname" type="text" data-er="Last Name"/>
                        <span class='dd-required'>*</span>
                    </div>
                </div>
                <div class="f-tablerow">
                    <div class="f-tablecell label-cell-r">
                        <label for="company">Company</label>
                     </div>
                    <div class="f-tablecell input-cell">
                        <select id="company" name="company" data-er="Company Name">
                            <option value="0"> - Select Comapny - </option>
                            <option value="1">Company 1</option>
                            <option value="2">Company 2</option>
                            <option value="3">Company 3</option>
                            <option value="4">Company 4</option>
                        </select>
                        <span class='dd-required'>*</span>
                    </div>
                </div>            
            </div>
            <input id="b1" type="submit" value="Submit" />
        </form>
    </div>
<div>
<script type="text/javascript">

    $.fn.CustomAlert = function (options, callback) {
        var settings = $.extend({
            message: null,
            detail: null,
            yesno: false,
            okaytext: null,
            yestext: null,
            notext: null
        }, options);

        var frm = "";
        detail = "<b>" + settings.detail + "</b>";
        message = "<b>" + settings.message + "</b>";
        if (settings.detail === null) {
            detail = "";
        };

        frm = frm + message + "<div style='text-align: left; margin-top: 15px; margin-bottom: 15px;'>" + detail + "</div>";

        if (settings.yesno === false) {
            frm = frm + "<input id='ok' type='button' value='" + settings.okaytext + "' class='standerd-button2' />";
        } else {
            frm = frm + "<div><input id='yes' type='button' value='" + settings.yestext + "' name='yes' class='standerd-button2' />" +
                        "<input id='no' type='button' value='" + settings.notext + "' name='no' class='standerd-button2' /></div>";
        };

        var frmesg = "<div id='cmessage' name='cmessage' class='c-message'>" +
                     "<div class='c-msgbox'>" +
                     "<form>" + frm + "</form>" +
                     "</div>" +
                     "</div>";

        $(".main-container").append(frmesg);

        if (!settings.yesno) {
            $("#cmessage #ok").click(function () {
                $("#cmessage").remove();
                callback(false);
            });
        } else {
            $("#cmessage #yes").click(function () {
                $("#cmessage").remove();
                callback(true);
            });
            $("#cmessage #no").click(function () {
                $("#cmessage").remove();
                callback(false);
            });
        };
    };

    $.fn.JsFormCheck = function () {
        var MessData = "";
        this.find('select, input').each(function () {
            if ($(this).attr("data-er")) {
                m = $(this).attr("data-er");
                switch ($(this).get(0).tagName) {
                    case "INPUT":
                        if ($(this).val().length === 0) {
                            MessData = MessData + "- " + m + "<br>";
                            $(this).css('border-bottom', '2px solid green');
                        };
                        break;
                    case "SELECT":
                        if ($(this).val() === "0") {
                            MessData = MessData + "- " + m + "<br>";
                            $(this).css('border-bottom', '2px solid green');
                        };
                        break;
                };
            };
        });

        if (MessData.length > 0) {
            MessData = "<b>" + MessData + "</b>";
            x = $().CustomAlert({message: "<b>Please fill in the following required fields to continue.</b>",
                               detail: MessData,
                               okaytext: "Close",
                               yesno: false});
            return true;
        } else {
            return false;
        };
    };

    $('#f1 #b1').click(function(event){
        event.preventDefault();
        Error = $("#f1").JsFormCheck();    
        if(Error === false){
            null;
            //Do Something
        };  
    });
</script>
</body>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.