Stop form from submitting values to php file if empty-CodePudding

I want to stop my form from submitting and taking an action on going to another php file if the form has no value from at least one of its variables.

<form id="advform"  action="advancedsearching.php" method="GET"  onsubmit = "return validate()" autocomplete="off"   >
                <div >              
                    <h4 >Advanced Search</h4>
        
                </div>
                <div >              
                    <div >
                        <label>Title:</label>
                        <input type="text" name="title"   autocomplete="off"  autocomplete="false" >
                    </div>
                    <div >
                        <label>Author:</label>
                        <input type="text" name="author"   autocomplete="off"  autocomplete="false" >
                    </div>
                    <div >
                        <label>ISBN:</label>
                        <input type="text"  name="isbn"   autocomplete="off"  autocomplete="false" >
                    </div>
                    

                    <div >
                        <label>Publisher:</label>
                        <input type="text"  name="publisher"   autocomplete="off"  autocomplete="false" >
                    </div>
                    <div >
                        <label>Keyword:</label>
                        <input type="text"  name="keyword"   autocomplete="off"  autocomplete="false" >
                    </div>
                </div>
                <div >
                    
        
                    <input type="submit"    value="Search" style="width:100%;border:1px solid black;">
                </div>
            </form>

tried adding

 <script>
function validate() {
    var x;
    x = document.getElementById("advform").value;
    if (x == "") {
        alert("Please Enter a Value");
        return false;
    };
}
</script>

but it is still submitting

CodePudding user response：

    function validate() {
        var inputs = document.getElementById('advform').getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i  )
        {
            if (inputs[i].type != "submit" && inputs[i].value != "") 
            {
                return true;
            }

            alert("Please Enter a Value");

            return false;
        }
    }

<form id="advform"  action="advancedsearching.php" method="GET"  onsubmit = "return validate()" autocomplete="off"   >
                <div >              
                    <h4 >Advanced Search</h4>
        
                </div>
                <div >              
                    <div >
                        <label>Title:</label>
                        <input type="text" name="title"   autocomplete="off"  autocomplete="false" >
                    </div>
                    <div >
                        <label>Author:</label>
                        <input type="text" name="author"   autocomplete="off"  autocomplete="false" >
                    </div>
                    <div >
                        <label>ISBN:</label>
                        <input type="text"  name="isbn"   autocomplete="off"  autocomplete="false" >
                    </div>
                    

                    <div >
                        <label>Publisher:</label>
                        <input type="text"  name="publisher"   autocomplete="off"  autocomplete="false" >
                    </div>
                    <div >
                        <label>Keyword:</label>
                        <input type="text"  name="keyword"   autocomplete="off"  autocomplete="false" >
                    </div>
                </div>
                <div >
                    
        
                    <input type="submit"    value="Search" style="width:100%;border:1px solid black;">
                </div>
            </form>

CodePudding user response：

Try to do this using an event assigned to the submit button:

document.getElementById("submitBtnId").addEventListener("click", function(event){
  // event.preventDefault() will stop your submit.
  event.preventDefault();
});

To proceed submitting you can use:

 event.currentTarget.submit();

CodePudding user response：

it doesn't work because you have the id in your form, it should be in the input that you want to validate.

other way its to use the required Attribute in the input

<input type="text"  name="publisher"   autocomplete="off"  autocomplete="false" required>

https://www.w3schools.com/tags/att_input_required.asp