Prevent refresh of page after alert

Question

I am trying to validate a form. I am successful on that, but if the alert kicks in, the page refresh and since i am using a pop up, this one closes and i have to open it again. I need to prevent that in the case of a miss click.

Here are the code:

HTML

   <div class="row">
                        <form action="" method="" id="formBoard" name="formOfBoard">
                            <div class="col-75">
                                <label for="bname">Name of the Board: </label><br>
                                <input type="text" id="boardname" name="boardname">
                            </div>
                            <div class="row">
                                <div class="col-75">
                                    <label for="ipadd">IP Address:</label><br>
                                    <input type="text" name="ipadd" id="ipaddress">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-75">
                                    <label for="portnum">Port:</label><br>
                                    <input type="text" name="portnum" id="portnum">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-75">
                                    <label for="imgadd">Upload image:</label><br>
                                    <img src="node_modules/@tabler/icons/icons-png/file-upload.png" alt="Insert image" class="insrtimg" name="imageboard" id="insertimage">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-80">
                                    <div>
                                        <div class="btnfrm" style="background-color: #F30D0DBF; color:antiquewhite" onclick="closeForm()">Discard</div>
                                        <input type="submit" class="btnfrm" style="background-color: rgb(67, 221, 67);" value="Save" onclick="validateIndexForm()">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </form>
            </div>

JavaScript

function validateIndexForm(){
    let x = document.getElementById("boardname").value;
    let y = document.getElementById("ipaddress").value;
    let z = document.getElementById("portnum").value;
    let w = document.getElementById("insertimage").value;
    let ipfrmt = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;;
if(x == ""){
    alert("Please insert the boards name");
    return false;
}
if(!y.match(ipfrmt)){
    alert("Please insert a valid IP address");
    return false;
}
if(z != isNaN() && !(z > 0)){
    alert("Please insert the correct port");
    return false;
}
return x, y, z;

}

Answer 1

The likely reason for the reload may be from the form action that is returning the default values into the URL, meaning it is causing new navigation (this can be seen in the dev console, such as chrome, by turning this on via the dev tool preferences.

I have tested this only with the HTML/JavaScript so not sure what other parts of the application are doing but hopefully this helps.

• Change the button onclick to the form onsubmit action
• passing through the event to the function
• prevent default when an error occurs

<div class="row">
<form action="" method="" id="formBoard" name="formOfBoard" onsubmit="validateIndexForm(event)">
    <div class="col-75">
        <label for="bname">Name of the Board: </label><br>
        <input type="text" id="boardname" name="boardname">
    </div>
    <div class="row">
        <div class="col-75">
            <label for="ipadd">IP Address:</label><br>
            <input type="text" name="ipadd" id="ipaddress">
        </div>
    </div>
    <div class="row">
        <div class="col-75">
            <label for="portnum">Port:</label><br>
            <input type="text" name="portnum" id="portnum">
        </div>
    </div>
    <div class="row">
        <div class="col-75">
            <label for="imgadd">Upload image:</label><br>
            <img src="node_modules/@tabler/icons/icons-png/file-upload.png" alt="Insert image" class="insrtimg" name="imageboard" id="insertimage">
        </div>
    </div>
    <div class="row">
        <div class="col-80">
            <div>
                <div class="btnfrm" style="background-color: #F30D0DBF; color:antiquewhite" onclick="closeForm()">Discard</div>
                <input type="submit" class="btnfrm" style="background-color: rgb(67, 221, 67);" value="Save" >
            </div>
        </div>
    </div>
</form>
</div>
</form>
</div>

function validateIndexForm(event){
    let x = document.getElementById("boardname").value;
    let y = document.getElementById("ipaddress").value;
    let z = document.getElementById("portnum").value;
    let w = document.getElementById("insertimage").value;
    let ipfrmt = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;;
    if(x == ""){
        event.preventDefault();
        alert("Please insert the boards name");
        return false;
    }
    if(!y.match(ipfrmt)){
        event.preventDefault();
        alert("Please insert a valid IP address");
        return false;
    }
    if(z != isNaN() && !(z > 0)){
        event.preventDefault();
        alert("Please insert the correct port");
        return false;
    }
    return x, y, z;
}

Note: to make further improvements to the lines of code that are repeated (prevent default) the function could be broken out into a validation function that returns true or false based on the inputs.