Не удается проверить, является ли поле ввода пустым или нет после нажатия кнопки sumbit

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я в основном проверяю, является ли поле ввода (полное имя) пустым или нет. Если оно пустое, то я хочу отключить кнопку отправки и заставить пользователя добавлять текст в поле FullName.

Для достижения этого сценария я сделал следующее (код ниже), но при тестировании я все еще могу нажать кнопку отправки, даже если поле полного имени пустое. Я не уверен, что я делаю неправильно с кодом JavaScript.

Я делаю все это внутри файла .htm.

 function checkform(form) {
  if (form.FullName.value == "") {
    alert("Please enter your name!");
    form.FullName.focus();
    return false;
  }
  return true;
}

 <fieldset>
  <div class="form-group">
    <label class="" for="FullName">Name <span class="required">*</span></label>
    <input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
  </div>
</fieldset>

Ответ №1:

 function checkform(form) {
  if (form.FullName.value == "") {
    alert("Please enter your name!");
    form.FullName.focus();
    return false;
  } else {
    return true;
  }
}

 <div id="Wrapp" class="container">
  <div id="MyName" class="center">
    <button id="btn_MyNamebutton" class="btn btn-namebtn">Sign In</button>
    <fieldset>
      <form name='form' id='form'>
        <div class="form-group">
          <label class="" for="FullName">Name <span class="required">*</span></label>
          <input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
        </div>
        <!-- Button -->
        <div class="form-group">
          <button id="btn_sumbit" type="button" class="btn btn-namebtn" onclick='checkform(form)'>Sign up</button>
          <button id="btn_clear" type="reset" class="btn">Cancel</button>
        </div>
      </form>
    </fieldset>
  </div>
</div>

Примечание: — Вы не добавили тег формы, и onclick='checkform(form)' это создало проблему в вашем коде.

Ответ №2:

Ваш JS в порядке. Есть некоторые изменения —

Сначала оберните содержимое формы в a form с атрибутом name of form .

Затем запустите checkform функцию при нажатии кнопки отправки.

Проверьте фрагмент ниже-

 function checkform(form) {
  if (form.FullName.value == "") {
      alert("Please enter your name!");
      form.FullName.focus();
      return false;
  }
  return true;
}

 <div id="Wrapp" class="container">
  <div id="MyName" class="center">
    <button id="btn_MyNamebutton" class="btn btn-namebtn">Sign In</button>
    <form name="form">
    <fieldset>
      <div class="form-group">
        <label class="" for="FullName">Name 
          <span class="required">*</span>
        </label>
        <input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
      </div>
      <!-- Button -->
      <div class="form-group">
        <button id="btn_sumbit" type="submit" class="btn btn-namebtn" onclick="checkform(document.form)">Sign up</button>
        <button id="btn_clear" type="reset" class="btn">Cancel</button> 
        </div>
    </fieldset>
    </form>
  </div>
</div>

Ответ №3:

Это то, что вы пытаетесь?

Onclick если значение ввода пустое, вы увидите предупреждение, и кнопка отключится.

РЕДАКТИРОВАТЬ: включены комментарии в коде.

 //get FullName input by id
var FullName = document.getElementById("FullName");
//get button by id
var btn_submit = document.getElementById("btn_submit");

function checkform() {
  //if FullName is empty then alert and disable button
  if (FullName.value === "") {
    alert("Please enter your name!");
    btn_submit.disabled = true;
  }
}

 <div id="Wrapp" class="container">
  <div id="MyName" class="center">
    <button id="btn_MyNamebutton" class="btn btn-namebtn">Sign In</button>
    <fieldset>
      <div class="form-group">
        <label class="" for="FullName">Name <span class="required">*</span></label>
        <input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
      </div>
      <!-- Button -->
      <div class="form-group">
        <button onclick="checkform();" id="btn_submit" type="submit" class="btn btn-namebtn">Sign up</button>
        <button id="btn_clear" type="reset" class="btn">Cancel</button>
      </div>
    </fieldset>
  </div>
</div>