Как проверить текстовое поле, используя баннер начальной загрузки - PullRequest
Новая
       8

Как проверить текстовое поле, используя баннер начальной загрузки

0 голосов
/ 24 апреля 2019

Я относительно новичок в javascript, и я пытаюсь создать баннер, который будет отображаться, если текстовое поле пусто. Но это не показывает. Как я могу сделать предупреждение с помощью баннеров начальной загрузки? 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<script type="text/javascript">

function validateForm() {
      var uname = document.getElementById("uname").value;
      if (uname == ""){
          bootstrap_alert.warning = function(message) {
            $('#alert_placeholder').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><span>'+message+'</span></div>')
        }

$('#clickme').on('click', function() {
            bootstrap_alert.warning('Please enter your name');
});
          return false;
      }
  }
</script>
</head>
<body>
Name: <input type: "text" name="uname" id="uname" />
<input type = "button" id = "clickme" value="Submit"/>
<div id = "alert_placeholder"></div>

</body>
</html>

1 Ответ

1 голос
/ 24 апреля 2019

Ну, есть несколько вещей, которые вы должны учитывать при написании кода JS:

  1. Всегда включайте $(document).ready(function(){});, если вы хотите, чтобы ваш Jquery код для ожидания загрузки HTML-тела. и как только он будет загружен, вы хотите используйте свой код JS.
  2. Еще одна вещь, которую вы создали validateform(), который никогда не вызывается из вашего кода, и ваш основной код существует внутри этой функции.

Я изменил ваш код для идеальной работы 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<script>
$( document ).ready(function() {

 $('#clickme').on('click', function() {
              bootstrap_alert('Please enter your name');
    });
      
           bootstrap_alert = function(message) {
          var uname=$("#uname").val();
      		if (uname.length==0){
            $('#alert_placeholder').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><span>'+message+'</span></div>')
        }
        else{
        $('#alert_placeholder').html('');
        }
    }
});
</script>
</head>
<body>
Name: <input type="text" name="uname" id="uname" />
<input type = "button" id = "clickme" value="Submit"/>
<div id = "alert_placeholder"></div>

</body>
</html>

Дайте мне знать ... если вам понадобится какая-либо помощь в этом отношении ... Я был бы рад помочь вам. Спасибо

...