CODEWITHSUNDEEP
javascripthtml
Ajharali
Ajharali

Reputation: 33

form should not be submitted if any one of the field is empty or not filled correctly using javascript

<form>
    <div class="form-group">
        <label for="add-price">Price
            <span class="glyphicon glyphicon-euro"></span>
        </label>
        <input type="number" class="form-control" id="add-price" value="0" step="any" min="0" name="number" onfocusout="check(this)" v-model="product.std_rte"/>
    </div>
<button type="submit" class="btn btn-primary" @click.prevent="createProduct">Create</button>
</form>

above is the HTML code for the question and downwards javascript required for validation.

function check(input){
    if (input.value == 0 || input.value == ""){
        // input.setCustomValidity('The number must not be zero or empty.');
        alert("The number must not be zero or empty.");
        return false;
     }else {
        input.setCustomValidity('');
     }
   return true;
}

the code is running for a input text validation but after i click on save button it is allowing to save the value,when value is zero and empty it is allowing it.i want to trap the form until the value is correctly given according to validation,and it should only allow to submit the form when it is correct.

Upvotes: 1

Views: 106

Answers (5)

Ajharali
Ajharali

Reputation: 33

       function printError(elemId, hintMsg) {
            document.getElementById(elemId).innerHTML = hintMsg;
        }

       function check(input) {
        var priceErr = true;
        var bt = document.getElementById("btsubmit");
        if (input.value <= 0 || input.value ==="") {
            bt.disabled = true;
            printError("priceErr", "Please enter valid price");
            return false;
        } else {
            bt.disabled = false;
            priceErr = false;
            printError("priceErr", "");
        }
        return true;
        }

and the respective Html code

<input type="number" class="form-control" id="add-price" onkeyup="check(this)" v-model="product.std_rte" required/>
<div class="error" id="priceErr"></div>

<input class="form-control" id="add-itemgrp1hd" v-model="product.itemgrp1hd"required/>
<div class="error"><p>*Mandatory<p></div>

<input class="form-control" id="add-name" v-model="product.itemfullhd" required/>
<div class="error"><p>*Mandatory<p></div>

<input type="file" id="edit-imagemain" v-model="product.Image_file" @change="onFileChanged" required/>
<div class="error"><p>*Mandatory<p></div>

Thanks All of You who all have responded to my question it was very helpful for me to know what actually was missing.here is the answer which works fine for me

Upvotes: 1

Mazhar Khan
Mazhar Khan

Reputation: 302

What you are doing wrong is that you first check the input field for incorrect input and then the form is submitted which is casing the form to be submitted. The validation is checked before the form submission.

What you need to do is validate the field on the button, so that when ever the button of form submission is clicked it first checks the field before submitting and when the value passes the validation, you can submit the form through javascript.

I have modified the code for the html as :

<form id="form">
    <div class="form-group">
                    <label for="add-price">Price <span class="glyphicon glyphicon-euro"></span></label>
                     <input type="number" class="form-control" id="add-price" value="0" step="any" min="0" name="number" v-model="product.std_rte"/>
    </div>
    <button type="submit" class="btn btn-primary" onclick="check(event)">Create</button>
    </form>

and the javascript function as

    function check(input) {
        var price = document.querySelector('#add-price').value;
        debugger;
        input.preventDefault();
        if (price == 0 || price == "") {
            // input.setCustomValidity('The number must not be zero or empty.');
            alert("The number must not be zero or empty.");
            return false;
        } else {
            input.setCustomValidity('');
        }
        document.querySelector('#form').submit();

        return true;
        }

Hope it helps.

Upvotes: 1

Thomas Ludewig
Thomas Ludewig

Reputation: 725

this might also help i add a ;

          onfocusout="check(this);" 


         function check(input) {
         console.log(typeof input.value); //might be possible that the check func is 
                                         //fine but not the data
         console.log(input.value);      //so lets have a look  
         var chk=true;
         try{
         if (typeof input.value === "undefined" ){ chk=false;}; //shouldn be but...
         if (input.value === 0 ){ chk=false;}; // more secure with type checking
         if (input.value === "" ){ chk=false;};
         if (parseInt(input.value) === 0 ){ chk=false;};  //if it is "0" - a string             
         } catch(ex) {
         chk=false;  
         console.log(ex);// just to learn more
         } 
         if (chk===false){  
            // input.setCustomValidity('The number must not be zero or empty.');
            alert("The number must not be zero or empty.");
            return false;
        } else {
            input.setCustomValidity('');
        }
        return true;
        }

Upvotes: 0

simonmikkelsen
simonmikkelsen

Reputation: 92

The check function is called from onfocusout on teh input box, but that cannot prevent a submit. Instead you should call it from the onsubmit="" on the submit button.

Upvotes: 0

Rohan Rao
Rohan Rao

Reputation: 2603

I think something is wrong with this line:

<input type="number" class="form-control" id="add-price" value="0" step="any" min="0" name="number" onfocusout="check(this)" v-model="product.std_rte"/>

You have used onfocusout which is why it is allowing the zero values after submitting. Change it to onclick event and then see the difference.

Hope this helps.

Upvotes: 1

Related Questions