Katerina23

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

Recommended Posts

Пытаюсь сделать пошаговую форму, чтобы при нажатии одна форма убиралась и появлялась другая, но дело в том что у меня есть часть формы где 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 by Katerina23

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,691
    Total Members
    3,128
    Most Online
    Roomty
    Newest Member
    Roomty
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.