Prevent refresh of page after alert-CodePudding

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 >
                        <form action="" method="" id="formBoard" name="formOfBoard">
                            <div >
                                <label for="bname">Name of the Board: </label><br>
                                <input type="text" id="boardname" name="boardname">
                            </div>
                            <div >
                                <div >
                                    <label for="ipadd">IP Address:</label><br>
                                    <input type="text" name="ipadd" id="ipaddress">
                                </div>
                            </div>
                            <div >
                                <div >
                                    <label for="portnum">Port:</label><br>
                                    <input type="text" name="portnum" id="portnum">
                                </div>
                            </div>
                            <div >
                                <div >
                                    <label for="imgadd">Upload image:</label><br>
                                    <img src="node_modules/@tabler/icons/icons-png/file-upload.png" alt="Insert image"  name="imageboard" id="insertimage">
                                </div>
                            </div>
                            <div >
                                <div >
                                    <div>
                                        <div  style="background-color: #F30D0DBF; color:antiquewhite" onclick="closeForm()">Discard</div>
                                        <input type="submit"  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;

}

CodePudding user response：

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 >
<form action="" method="" id="formBoard" name="formOfBoard" onsubmit="validateIndexForm(event)">
    <div >
        <label for="bname">Name of the Board: </label><br>
        <input type="text" id="boardname" name="boardname">
    </div>
    <div >
        <div >
            <label for="ipadd">IP Address:</label><br>
            <input type="text" name="ipadd" id="ipaddress">
        </div>
    </div>
    <div >
        <div >
            <label for="portnum">Port:</label><br>
            <input type="text" name="portnum" id="portnum">
        </div>
    </div>
    <div >
        <div >
            <label for="imgadd">Upload image:</label><br>
            <img src="node_modules/@tabler/icons/icons-png/file-upload.png" alt="Insert image"  name="imageboard" id="insertimage">
        </div>
    </div>
    <div >
        <div >
            <div>
                <div  style="background-color: #F30D0DBF; color:antiquewhite" onclick="closeForm()">Discard</div>
                <input type="submit"  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.