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

Question

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

0

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

Вот как выглядит мой код: ДЕТАЛИ

<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>

user11 18 сен. 2013, в 10:31

Источник

Теги:

javascript

jquery

html

validation

forms

3 ответа

Ещё вопросы

Elena · Answer 1 · 2013-09-18T05-55-00.000Z

Попробуйте использовать плагин jQuery Form: 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>

Спасибо Елене за ваш ответ, но ваш заявленный сценарий, кажется, отключил кнопку «Далее»

markvicencio · Answer 2 · 2013-09-18T05-47-00.000Z

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

$(".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

Ganesh Pandhere · Answer 3 · 2013-09-18T05-45-00.000Z

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

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

Привет, Ганеш ... спасибо за твой ответ, но использование приведенного выше кода дает тот же результат ... при нажатии следующей кнопки скрытая форма отображает ДАЖЕ без данных в полях ввода