js function that checks form fields: does not work

Question

function controllaFormStanza(){
    var stanza = document.myForm.stanza.value;

    var ok = true;
  
        if (stanza.length == 0){
            document.getElementById("noNomeStanza").innerHTML="Dai un nome alla tua stanza!";
            ok = ok && false;
        }
        else {
            document.getElementById("noNomeStanza").innerHTML="";
            ok = ok && true;
        }
        for(i=0;i< document.myForm.immagine.length; i++) {
            if(document.myForm.immagine[i].checked) {
                ok = true;
            }
            else {
                document.getElementById("noImmagine").innerHTML="Seleziona una icona per la tua stanza!";
                ok = false;
            }
        }
  
        if (ok){
            document.myForm.submit();
            return true;
        }
        else {
            return false;
        }
            
    }

    <form action="formStanza.php" method="post" name="myForm" enctype="multipart/form-data">
    <div class="row">
                <table>
                   <tr>
                      <td align="center">Nome nuova stanza:
                   <tr>
                      <div <?php if (isset($name_error)): ?> <?php endif ?> >
                      <td><input type="text" name="stanza" placeholder="Inserisci nome stanza" size="30" maxlength="40"/>
                   <tr>
                      <td align="center">
                         <div class="avvertenza" id="noNomeStanza">  </div>
                         
                         <div class="row">
            <table>
               <tr>
                  <td align="center">Icona della stanza:
               <tr>
                  <td>
                  <input type="radio" name="immagine" class="sr-only" id="bagno" value="bath.png">
                     <label for="bagno">
                        <img src="icone/icone_stanze/bath.png" alt="bagno">
                     </label>
                  
                  <input type="radio" name="immagine" class="sr-only" id="cameretta" value="bedroom.png">
                     <label for="cameretta">
                        <img src="icone/icone_stanze/bedroom.png" alt="cameretta">
                     </label>
               <tr>
                  <td align="center">
                     <div  class="avvertenza" id="noImmagine">  </div>
            </table>

         </div>
         
                 <div class="row">
            <table>
               <tr>
                  <td align="center">
                
                     <input type="submit" name="mySubmit" class="bottone btn btn-lg btn-info" value="Crea stanza" onclick="return controllaFormStanza()">
            </table>

         </div>


      </form>

I have a form in a php file. When submitting this form, I call a control js function. The controllaFormStanza() function verifies that the "stanza" field of type text is not empty and that a value has been selected in the radio. In this second part I have a problem. Even if a value is selected in the radio, I still get the error message that should appear when nothing is selected. Why? Where am I wrong? This is my function:

function controllaFormStanza(){
    var stanza = document.myForm.stanza.value;


    
    var ok = true;
  
        if (stanza.length == 0){
            document.getElementById("noNomeStanza").innerHTML="Dai un nome alla tua stanza!";
            ok = ok && false;
        }
        else {
            document.getElementById("noNomeStanza").innerHTML="";
            ok = ok && true;
        }
        for(i=0;i< document.myForm.immagine.length; i++) {
            if(document.myForm.immagine[i].checked) {
                ok = true;
            }
            else {
                document.getElementById("noImmagine").innerHTML="Seleziona una icona per la tua stanza!";
                ok = false;
            }
        }
  
        if (ok){
            document.myForm.submit();
            return true;
        }
        else {
            return false;
        }
            
    }

Please show a minimal reproducible example that contains both js and html. — t.niese
– t.niese, Commented Aug 26, 2021 at 15:51
You should never set the variable to true after initialization. Only set to false when something fails. Your code says: Is this radio button selected? No? okay it is an error..... You are not seeing if any of them are checked. — epascarello
– epascarello, Commented Aug 26, 2021 at 16:12
your ok logic is highly flawed. ok = ok && false; is the same thing as ok = false;. Also most of your ok statements are not even in a loop so they are useless. They will just be over-written by the next if/then statement. — Rick
– Rick, Commented Aug 26, 2021 at 16:55

Cid · Accepted Answer · 2021-08-26 16:07:07Z

1

Your loop is forgetting the previous value when you're doing ok = true; or ok = false;. I bet that if you select the last element of the radios the function validates the form.

you have the solution in your code, by using the && operator like you did when checking the text field

Since you are setting error messages within the loop, I suggest you using another variable and place the error handling outside of the loop.

let AnyRadioButtonsChecked = true;
for(i=0;i< document.myForm.immagine.length; i++) {
    if(document.myForm.immagine[i].checked) {
        //                     vv--------------------- check this
        AnyRadioButtonsChecked &&= true; // equivalent to AnyRadioButtonsChecked = AnyRadioButtonsChecked && true;
    }
    else {
        //                     vv--------------------- check this
        AnyRadioButtonsChecked &&= false;
    }
}
if (!AnyRadioButtonsChecked) {
    document.getElementById("noImmagine").innerHTML="Seleziona una icona per la tua stanza!";
}
ok &&= AnyRadioButtonsChecked;

It could be simplified using Array.prototype.some() that will return true if any element match the condition :

let AnyRadioButtonsChecked = document.myForm.immagine.some(element => element.checked);

edited Aug 26, 2021 at 16:07

answered Aug 26, 2021 at 15:58

Cid

15.3k4 gold badges33 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

asbarabungi Over a year ago

I always have the same problem even doing it this way. I don't understand where I'm wrong

Cid Over a year ago

document.getElementById("noImmagine").innerHTML="Seleziona una icona per la tua stanza!"; should be outside of the loop

asbarabungi Over a year ago

To get out of the for loop when I encounter the checked value I put a "break" in the if. But nothing changes, in the end the variable ok is always equal to false. Because? I do not understand

epascarello · Accepted Answer · 2021-08-26 16:47:52Z

I would just simplify the code and check each thing.

Easiest thing is to look to see if a checkbox is selected, not to loop over each one.

function controllaFormStanza() {

  const form = document.myForm;
  const isStanzaValid = form.stanza.value.trim().length > 0;
  document.getElementById("noNomeStanza").innerHTML = isStanzaValid ? '' : "ERROR";

  const isImmagineValid = form.querySelector('[name="immagine"]:checked') !== null;
  document.getElementById("noImmagine").innerHTML = isImmagineValid ? '' : 'ERROR';

  return isStanzaValid && isImmagineValid;
}

<form action="formStanza.php" method="post" name="myForm" enctype="multipart/form-data">
  <div class="row">
    <table>
      <tr>
        <td align="center">Nome nuova stanza:
          <tr>
            <div <?php if (isset($name_error)): ?>
              <?php endif ?>
              <td><input type="text" name="stanza" placeholder="Inserisci nome stanza" size="30" maxlength="40" />
                <tr>
                  <td align="center">
                    <div class="avvertenza" id="noNomeStanza"> </div>

                    <div class="row">
                      <table>
                        <tr>
                          <td align="center">Icona della stanza:
                            <tr>
                              <td>
                                <input type="radio" name="immagine" class="sr-only" id="bagno" value="bath.png">
                                <label for="bagno">
                        <img src="icone/icone_stanze/bath.png" alt="bagno">
                     </label>

                                <input type="radio" name="immagine" class="sr-only" id="cameretta" value="bedroom.png">
                                <label for="cameretta">
                        <img src="icone/icone_stanze/bedroom.png" alt="cameretta">
                     </label>
                                <tr>
                                  <td align="center">
                                    <div class="avvertenza" id="noImmagine"> </div>
                      </table>

                    </div>

                    <div class="row">
                      <table>
                        <tr>
                          <td align="center">

                            <input type="submit" name="mySubmit" class="bottone btn btn-lg btn-info" value="Crea stanza" onclick="return controllaFormStanza()">
                      </table>

                    </div>


</form>

Collectives™ on Stack Overflow

js function that checks form fields: does not work

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related