валидация формы на корректность данных

116

13 декабря 2021, 04:20

Есть форма

<?php
$code = 1234;
 ?>
<input type="text" placeholder="Введите код сообщения"  />
<input type="submit" name="submit" value="проверить"  />

Подскажите, пожалуйста, как сделать так что бы что когда ввожу 1234, у меня выходило сообщение что код верный, если нет то ошибка.

Все что я нахожу это валидацию формы, заведена форма или нет.

я делаю это так

 <form>
    <input type="text" pattern="<?php echo $code ?>" />
    <button type="submit">Отправить</button>
  </form>

Как добавить что бы внизу выходило, если верно введено то ниже надпись корректно введено и внизу выходила еще input, а если нет то ошибка?

Answer 1

Вариант 1

Если Ваш код является секретным (а иначе зачем его хранить в php на сервере?), то решение задачи должно быть следующим:

Вы создаёте отдельный php-файл (скажем, code.php), где будет храниться и по запросу возвращаться Ваш код

<?php
    $code = 1234;
    echo $code;
?>

В форме добавляете атрибуты action и method и с помощью ajax'a (чтобы не перезагружалась страница) отправляете запрос на сервер, чтобы сравнить Ваш код и код, введённый пользователем. Если значения не совпадают, выводите сообщение об ошибке. Если совпадают, пишете "успешно" и открываете скрытый второй инпут

<form action="code.php" method="POST">
  <input type="text" name="code" placeholder="Введите код сообщения"  />
  <input type="submit" name="submit" value="проверить"  />
  <p class="message"></p>
  <input type="text" name="newInput" hidden="" placeholder="Скрытый инпут" />
</form>
$(document).ready(function() {
    $('[type=submit]').click(function(e) {
      e.preventDefault();
        const form = $("form");
        $.ajax({
          cashe: false,
          type: form.attr('method'),
          url: form.attr('action'),
          data: form.serialize(),
          success: function(data) {
            if($('[name=code]').val() == data) {
                $('.message').text('Верно!').css('color','green');
                $('[name=newInput]').prop('hidden',false);
            }
            else {
                $('.message').text('Ошибка!').css('color','red');
            }
          }
        }); 
    });
});

Вариант 2

Если же Ваш код не секретный, то с php вообще нет смысла заморачиваться - вы можете прямо на клиенте проверять то, что ввёл пользователь, и осуществлять дальнейшие действия:

$('[type=submit]').click(function(e){ 
  e.preventDefault(); 
  if($('[name=code]').val() == 1234) { 
    $('.message').text('Верно!').css('color','green'); 
    $('[name=newInput]').prop('hidden',false); 
  } 
  else { 
    $('.message').text('Ошибка!').css('color','red'); 
  } 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form action="" method=""> 
  <input type="text" name="code" placeholder="Введите код сообщения"  /> 
  <input type="submit" name="submit" value="проверить"  /> 
  <p class="message"></p> 
  <input type="text" name="newInput" hidden="" placeholder="Скрытый инпут" /> 
</form>

Answer 2

Вместо '1234' вставьте свою переменную из php.

let code = 1234; // '<?php echo $code;?>' 
let input = document.querySelector('input') 
 
input.addEventListener('input', function() { 
  input.value == code ? console.log('success') : console.log('error') 
})