J'ai un formulaire qui comporte quatre champs, lorsque tous les champs sont vides et que le bouton Soumettre est cliqué - il devrait alerter " Veuillez sélectionner au moins une valeur ".

Lorsque j'entre la valeur dans l'un des champs, le formulaire doit être soumis. J'ai essayé le code suivant mais ça ne marche pas

function validatefleid() {
  var computername = document.myform.computername.value;
  var monitorname = document.myform.monitorname.value;
  var tvname = document.myform.tvname.value;
  var laptopname = document.myform.laptopname.value;
  var cellphonename = document.myform.cellphonename.value;
  if ((computername == null || computername == "") || (monitorname == null || monitorname == "") || (tvname == null || tvname == "") || (laptopname == null || laptopname == "") || (cellphonename == null || cellphonename == "")) {
    alert("Please atleast one value");
    return false;
  }

}
<form name="myform" onsubmit="return validatefleid()">
  computer
  <input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000">monitor
  <input type="text" class="form-control inpt-bx-txtclr-home" name="monitorname" id="monitorid" placeholder="000">tv
  <input type="text" class="form-control inpt-bx-txtclr-home" name="tvname" id="tvid" placeholder="000">laptop
  <input type="text" class="form-control inpt-bx-txtclr-home" name="laptopname" id="laptopid" placeholder="000">cellphone
  <input type="text" class="form-control inpt-bx-txtclr-home" name="cellphonename" id="cellphoneid" placeholder="000">

  <button type="submit">Calculate</button>
</form>
1
Arun Kumaresh 7 mars 2016 à 16:01

4 réponses

Meilleure réponse

Cela est possible en parcourant tous les input du formulaire et recherchez au moins un input avec une valeur différente de ''. Consultez la démo:

$(function(){
  var $form = $('#myform');
  $form.submit(function(){
    var valid = false;
    $('input', $form).each(function(){
      if($(this).val() != ''){
        valid = true;
      }
    });
    if (!valid) {
      alert("Please atleast one value");
    }
    return valid;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" name="myform">


computer<input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000">
monitor<input type="text" class="form-control inpt-bx-txtclr-home" name="monitorname" id="monitorid" placeholder="000">
tv<input type="text" class="form-control inpt-bx-txtclr-home" name="tvname" id="tvid" placeholder="000">
laptop<input type="text" class="form-control inpt-bx-txtclr-home" name="laptopname" id="laptopid" placeholder="000">
cellphone<input type="text" class="form-control inpt-bx-txtclr-home" name="cellphonename" id="cellphoneid" placeholder="000">

<button  type="submit" >Calculate</button>

</form>
3
Ronen Cypis 7 mars 2016 à 13:58

Sans jQuery:

https://jsfiddle.net/uL28jsf9/

<script type="text/javascript">
function validatefleid()
{
    var allFieldsNames = ['computername', 'monitorname', 'tvname', 'laptopname', 'cellphonename'];

    var checkIfFieldEmpty function(fieldName) {
      var fieldValue = document.myform[fieldName].value;

      return fieldValue === "" || fieldValue === null
    }

  var allFieldsEmpty = allFieldsNames.every(checkIfFieldEmpty);

  if (allFieldsEmpty) {
    alert("Please atleast one value");
    return false;
  }
  else {
    alert("I'm ok with that !")
  }
}
</script>
2
mr-wildcard 7 mars 2016 à 13:40
oops i have got the answer 

I have a form which as four fields when the all the fields are empty and submit button is clicked it should alert as "please select atleast one value" when i entry the value in any of the one fields the form should get submitted i have tries the following code but its not working  



     <script type="text/javascript">
        function validatefleid()
        {
     var computername=document.myform.computername.value;
     var monitorname=document.myform.monitorname.value;
     var tvname=document.myform.tvname.value;
     var laptopname=document.myform.laptopname.value;
     var cellphonename=document.myform.cellphonename.value;
     if((computername==null || computername=="") && (monitorname==null || monitorname=="") && (tvname==null || tvname=="") && (laptopname==null || laptopname=="") && (cellphonename==null || cellphonename==""))
     {
        alert("Please atleast one value");
        return false;
     }

        }


    </script>

    <form name="myform" onsubmit="return validatefleid()">


    computer<input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000">
    monitor<input type="text" class="form-control inpt-bx-txtclr-home" name="monitorname" id="monitorid" placeholder="000">
    tv<input type="text" class="form-control inpt-bx-txtclr-home" name="tvname" id="tvid" placeholder="000">
    laptop<input type="text" class="form-control inpt-bx-txtclr-home" name="laptopname" id="laptopid" placeholder="000">
    cellphone<input type="text" class="form-control inpt-bx-txtclr-home" name="cellphonename" id="cellphoneid" placeholder="000">

    <button  type="submit" >Calculate</button>

    </form>
1
Arun Kumaresh 7 mars 2016 à 13:12

Voici une version complète multi-navigateur de la fonction validatefleid.

function validatefleid(){
    var inputIds = ['computerid','monitorid','tvid','laptopid','cellphoneid'];
    var hasEnteredAnyValue = false;

    for(var i=0;i<inputIds.length;i++){
        hasEnteredAnyValue = document.getElementById(inputIds[i]).value;

        if(hasEnteredAnyValue)break;        
    }

     if(!hasEnteredAnyValue)
     {
        alert("Please atleast one value");
        return false;
     }
}
1
Sufian Saory 7 mars 2016 à 13:38