Как сделать валидацию jquery для пошаговой формы?

Katerina23 · February 1, 2020

Пытаюсь сделать пошаговую форму, чтобы при нажатии одна форма убиралась и появлялась другая, но дело в том что у меня есть часть формы где input'ы добавляются динамически при нажатии на кнопку "Добавить строку". Если делать валидацию на jquery, то её нужно привязывать к submit. К ней я привязать не могу так как её нету и она скрыта (откроется после нескольких щелчков "Следующая"). Можно как нибудь привязать валидацию к обычной кнопки? Она у меня уже создана. Как при правильном заполнении всех полей и нажатии кнопки выдавала для начало сообщение "Следующая"?

Вот весь код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="" />
 <link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
 $.validator.addMethod("mytst", function (value, element) 
 {
        var flag = true;
                
      $("[name^=name_ct]").each(function (i, j) 
      {
                        $(this).parent('p').find('label.error').remove();
$(this).parent('p').find('label.error').remove();                        
                        if ($.trim($(this).val()) == '') {
                            flag = false;
                            
                            $(this).parent('p').append('<label  id="id_ct'+i+'-error" class="error">This field is required.</label>');
                        }
                });
                return flag;
 }, "");
$("form").validate({

    ignore: '',
    rules: {
        "name_ct[]": {
            mytst:true
        }
    },
    submitHandler: function () {
        form.submit();
        alert('successful submit');
        return false;
    }
});

var j = 1;
$('#submit').click(function () {
  alert("Следующая");
});

$('#add').click(function () {
    $('form div').append('<p><input name="name_ct[]" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant ' + j + ' Name " ></p>');
   
    j++;
});
});
</script>
<form>
    <div>Name:
       <p>
        <input name="name_ct[]" id="id_ct0" type="text" class="form-control" placeholder="Имя">
        </p>
    </div>
    <input id="add" type="button" value="Добавить строку" />
    <input id="submit" type="button" value="Следующая" />
</form>
</body>
</html>

Edited February 1, 2020 by Katerina23

Katerina23 · February 2, 2020

Уже не надо, я использовала валидацию от jquery. Вот пример: https://codepen.io/Smith37/pen/QWweddB

Sign In

Как сделать валидацию jquery для пошаговой формы?

Question

Katerina23

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Katerina23

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information