html: создать всплывающее окно так же, как при отсутствии обязательного поля - PullRequest
Новая
       132

html: создать всплывающее окно так же, как при отсутствии обязательного поля

0 голосов
/ 31 января 2020

У меня есть форма с тремя вопросами, и я хочу показать вопросы в определенном порядке. Каждый вопрос должен быть дан ответ в текстовом поле. У меня есть следующий пример:

JSFiddle demo 

var imageIndex = 0;
var images = [
    "https://upload.wikimedia.org/wikipedia/commons/a/a3/June_odd-eyed-cat.jpg",
    "https://www.aaha.org/contentassets/f557d057200b4d7197d67acce3ea725f/image9iii.png",
    "https://cdn3-www.cattime.com/assets/uploads/gallery/persian-cats-and-kittens/persian-cat-breed-pictures-1.jpg"    
     ];

function next() {	
    //document.getElementById('grade').value = '';

    var grade = $("#grade").val();

    if(grade == '') {
      alert("Please give a grade");
    }
    
    else {
      imageIndex = (imageIndex+1) % (images.length);    
      $("#image").attr('src', images[imageIndex]);
      
      // need to record the value

      // set to empty
      $('#grade').val(""); 
    }
    
    if(imageIndex == images.length - 1) {
      $("#next").attr('style', 'display: none');
      $("#submit").attr('style', 'display: inline');
    }
}

   $( document ).ready(function() {
     $("#image").attr('src', images[0]);
     $("#next").on("click", next);
    });
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
<form>

<fieldset>
    <div class="row">
      <div class="col-lg-6">
          <!--<p>image ${image_url}</p>-->
          <img src="" class="img-fluid" id="image" height="auto" width="700" align="center">
      </div>
    </div>
</fieldset>

<fieldset>
    <label>Please grade with anything:</label>
</fieldset>

<fieldset>
    <input id = "grade" type="text" max-length="25" value="" required></input>

</fieldset>


<p><input type='button' id='next' value='Next' style="display: inline"/></p>

<p><input type='submit' id='submit' value='Submit' style="display: none"/></p>




</form>

</body>

</html>

Тем не менее, для первых двух вопросов у меня может быть только предупреждение, когда в текстовое поле не введен ответ. Для последнего вопроса я могу получить всплывающее окно с надписью «Пожалуйста, заполните это поле» рядом с текстовым полем.

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

Дополнительный / дополнительный вопрос: похоже, что после отправки формы только ответ на последний вопрос записывается. Как я могу записать все ответы?

Любые предложения приветствуются. Спасибо.

...