Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,
I would like it to give me an error message if the input string length is less than three characters. Where am I wrong?

I also have checkboxes inside the function that I removed to simplify the code.


What I have tried:

<pre lang="HTML"><pre><!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Car Parking</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <script src="./js/jquery-3.6.0.min.js"></script>
  <script src="./js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <form action="FormCarParking.php" method="POST">
    <div class="section">

      <div class="row">
        <div class="col-md">
          <div class="form-group">
            <label for="fname">Nome</label>
            <input class="form-control" type="text" id="utente" name="fname" placeholder="Inserisci il nome" required>
          </div>
        </div>


        <!--        <div class="col-md">
          <div class="form-group">
            <label for="fname">Nome</label>
            <input class="form-control" type="text" name="lname" placeholder="Inserisci il cognome" required>
          </div>
        </div>-->

      </div>
      <input type="submit" class="btn btn-primary" value="Invia">
  </form>
</body>
<script>
  (function() {
    const selectionCheckbos = document.querySelector('.section');
    const text = document.querySelectorAll('input[type=text]');
    const textLength = text.length;
    const firstText = textLength > 0 ? text[0] : '';

    function initText() {
      if (firstText) {
        for (let i = 0; i < textLength; i++) {
          text[i].addEventListener('change', textValidity);
        }

        textValidity();
      }
    }

    function chekText() {
      const min = 3;
      
        if (firstText.length >= min) {
          return true;
        }
        return false;
      }
      

    function textValidity() {
      const errorMessage = !chekText() ? 'Il campo non valido' : '';
      firstText.setCustomValidity(errorMessage);
    }

    initText();
  })();
  </script>

</html>
Posted
Comments
Richard MacCutchan 15-Jun-21 11:25am    
I think you need to check the length of the text variable rather than firstText.
MiaPe 16-Jun-21 3:21am    
No working.


(function() {
const selectionCheckbos = document.querySelector('.section');
const text = document.querySelectorAll('input[type=text]');
const textLength = text.length;


function initText() {

for (let i = 0; i < textLength; i++) {
text[i].addEventListener('change', textValidity);
}

textValidity();
}


function chekText() {
const min = 3;
for(let i = 0; i < textLength; i++) {
if (text[i].length < min) {
return false;
}
return true;
}
}


function textValidity() {
const errorMessage = !chekText() ? 'Il campo non valido' : '';
text.setCustomValidity(errorMessage);
}


})();
Richard MacCutchan 16-Jun-21 4:17am    
What does that mean? What is not working, what values are being compared, what results are you seeing? Please do not expect us to guess what happens on your system.
MiaPe 16-Jun-21 5:48am    
Ok, I try to explain myself better.
I have some text type inputs in a form.
With a single function, I would like Javascript to check the length of each input.
If the length is less than 3, the function should give an error message. Now the error message is not displayed. Why?
I hope I have been clearer.
Thank you
Richard MacCutchan 16-Jun-21 6:02am    
Without the data it is impossible to guess why it does not work. You need to do some debugging to see exactly what is the length of each object that is being examined.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900