Проверка формы, отображающей другую скрытую форму с помощью jquery

У меня проблема с моим кодом jQuery. У меня есть две формы на моей странице. Показывается, когда пользователь загружает страницу, а другой - hidden (set to style = "display: none;"). Я хочу заполнить все детали в первой форме и щелкнуть дальше, отобразить скрытую форму. Проблема заключается в том, что скрытая форма отображается при нажатии кнопки «Далее», даже если первая форма не имеет ввода. угадал я делаю что-то неправильно с кодом проверки JQuery (я использую плагин JQuery Validation) .. любая помощь будет заранее было оцененоПроверка формы, отображающей другую скрытую форму с помощью jquery

Вот как мой код выглядит следующим образом: ПОДРОБНО.Подробнее

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> 

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script> 

<body> 

<div class="item item1"> 
<form action="index.html" method="get" id = "form1"> 

<h1>The DETAILS</h1> 
<p align="justify">Try our FREE landlord cost calculator and<br> 
    discover the real cost of letting your property. <br> 
    <input name="name" type="text" placeholder="your name"class="required" /> 


    <br> 

    <input name="email" type="text" placeholder="your email" class="required" /> 
    <br> 

    <input name="phone" id="phone" type="text" placeholder="your phone no" class="required" /> 
    <br> 

    <input name="postcode" id="postcode" type="text" placeholder="postcode of property to let" class="required" /> 
    <br> 

    <select name="bedrooms" id="bedrooms" placeholder="bedrooms" class="required" > 

    <option value="1">1</option> 
    <option value="2" >2</option> 
    <option value='' disabled selected="selected">Please Choose</option> 
    </select> 
    <br> 

    <input name="hearAbout" type="text" placeholder="where did your hear about us?" class="required" /> 
    <br> 

    <button class="submit button1 " id = "next" name="submit" type="submit" value="next"><span class="next ">></span>next</button> 
    </p> 
    </form> 



</div> 

    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#form1").validate(); 
    }); 
    </script> 


<script> 
$("#form1").submit(function() { 
    /* AJAX calls and insertion into #form2 */ 
    $("#form2").show(); 
    return false; 
    }); 
    </script> 



    <div class="item item2"> 


<form action="calculation.php" method="post" id = "form2"style="display:none;"> 
<h1>The Income</h1> 
<label> Estimated monthly rent:&pound; </label>  <input name="rent" id="rent" type="text" /><hr> 
THE COSTS   STEP 3 <hr> 
Agents Commission: <select name="commission" id="commission"> 
<option value="10%">10%</option> 

<option value="12%" selected="selected">12%</option> 
</select> <hr> 
Estimated Setup Fees:&pound; <input id="fees" name="fees" type="text" /><hr> 

How many weeks in the year do you estimate <br>that your property will<br> be vacant/empty?<input name="weeks" type="text" /><hr> 
<button class="submit button2" name="submit" type="submit" value="calculate"><span class="next">></span>calculate</button> 
</form> 

</div>

источник

2013-09-18 user11

где аргументы для проверки формы JQuery? вот ссылка http://jqueryvalidation.org/validate – markvicencio

Я использую атрибут 'submit' в теге кнопки для первой формы – user11

Я понимаю это, но где поля, которые вы проверяете? где правила? – markvicencio

Ваше действие отправки должно быть подтверждено при отправке первой формы, а затем отобразить другую форму. Пожалуйста, попробуйте ввести код ниже.

<script> 
$(document).ready(function(){ 
    $("#form1").submit(function() { 
    $("#form1").validate(); 
    /* AJAX calls and insertion into #productionForm */ 
    $("#form2").show(); 
    return false; 
    }); 
}); 
</script>

источник

2013-09-18 07:46:22

Hey Ganesh..thanks для вашего ответа, но с использованием вашего кода выше дает тот же результат .. щелчок следующей кнопкой заставляет скрытую форму отображать EVEN без NO данных в поля ввода – user11

Попробуйте использовать JQuery Form Plugin: http://malsup.com/jquery/form/

Поместите это в разделе:

<script src="http://malsup.github.com/jquery.form.js"></script>

, а затем изменить свой скрипт с ajaxForm:

<script> 
$("#form1").ajaxForm(function() { 
/* AJAX calls and insertion into #productionForm */ 
$("#form2").show(); 
return false; 
}); 
</script>

источник

2013-09-18 07:52:20 Elena

Спасибо Elena за ваш ответ, но ваш заявленный скрипт, похоже, отключил кнопку «next» – user11

Вот что я говоря о своем комментарии Харун Туо:

$(".selector").validate({ 
    rules: { 
    // simple rule, converted to {required:true} 
    name: "required", 
    // compound rule 
    email: { 
     required: true, 
     email: true 
    } 
    }, 
    submitHandler: function(form) { 
    // do other things for a valid form 
    form.submit(); 
    $("#form2").show(); 
     return false; 
    }); 
    } 
});

Вы можете подать заявку здесь. Прочтите документацию. Вы также можете управлять размещением ошибок.

http://jqueryvalidation.org/validate

источник

2013-09-18 08:04:27 markvicencio

Проверка формы, отображающей другую скрытую форму с помощью jquery

ответ

Смежные вопросы