JavaScript validate input doesn't work correctly

Question

I want to validate that when pressing a button it is validated if the input, in case it is empty, an alert appears and that it focuses on that input, but what happens is that if it is empty, the alert comes out but sends me to another page.

Form:

<html>

<head>
  <title>prueba</title>
</head>

<body>
  <form onsubmit="control()" action="https://stackoverflow.com">
    <input type="text" id="uname" placeholder="Ingrese usuario..." name="uname">
    <input type="password" placeholder="Ingrese contraseña..." name="psw">
    <button type="submit">Iniciar sesión</button>
  </form>

  <script>
    function control() {
      if (document.getElementById('uname') == "") {
        alert("El campo no puede estar vacío.");
        document.getElementById('uname').focus();
        return false;
      }
      return true;
    }
  </script>
</body>

</html>

The script doesn't work 'cause when i press the button and input text is empty this no shows the alert and redirect me to page. Any sugerence?

onsubmit="return control()"

epascarello
– epascarello

2020-07-22 21:16:57 +00:00
Commented Jul 22, 2020 at 21:16 — epascarello
– epascarello, Commented Jul 22, 2020 at 21:16

TommyBs · Accepted Answer · 2020-07-22 21:17:45Z

1

Change your if statement to the following so you actually check if the 'value' of the field is empty. As it stands you're checking if the DOMElement is equal to ""

   if (document.getElementById('uname').value == "") {

answered Jul 22, 2020 at 21:17

TommyBs

9,7484 gold badges37 silver badges74 bronze badges

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

1 Comment

user12799076 Over a year ago

Finally, the answer is here and is correct. thank you so much!!!

MMRahman · Accepted Answer · 2020-07-22 21:38:28Z

You can try this as well. This will check onblur field by field.

var validating = false; 
function control(element) {
  var id = element.id;

  var errors = {
      psw : 'enter password',
      uname : 'enter Username'
  };
if (document.getElementById(id).value === '') {
    if (id in errors) {
      if(validating == false) {
        validating = true
        alert(errors[id]);
        setTimeout(function(){
          document.getElementById(id).focus();
          validating = false;
        }, 1);
     }
    }
}
}

<html>
    <head>
        <title>prueba</title>
    </head>
    <body>
        <form action="https://stackoverflow.com" >
        <input id="uname" name="uname" value="" type="text" onblur="control(this)" autocomplete='off'>
        <input type="password" placeholder="Ingrese contraseña..." name="psw" id="psw" value=""  onblur="control(this)" autocomplete='off' >
                    <button type="submit">Iniciar sesión</button>
            </form>
    </body>
</html>

Collectives™ on Stack Overflow

JavaScript validate input doesn't work correctly

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related