防止用户在未填写所需信息的情况下按 Next 并在向导表单中显示警告消息 html 和 javascript 有效

问题描述

请帮忙，因为我厌倦了编辑并且我无法将JavaScript代码添加到现有代码中，因为我希望用户填写第一个文件dest中的所有数据，直到他移动到下一个并且他会看到一条错误消息，提示他必须填写全名字段或提交字段。 我的代码：

<div class="form_holder  direc">
<form id="msform" action="JoinUs.PHP" method="post" >

 <fieldset>

<div class="row rowINdata">
<div class="col-md-12 coldatatxt text_modify direc"> <span class="data-name">  fullname: </span> 
</div>
<div class="col-md-12 coldatainput"><div class="wrap-input100 validate-input" data-validate = "">
<input type="text" name="fullname" placeholder="Your Name" id="fullname"   />
</div></div>
</div>

<input type="button" name="next" id="nextbtn" class="next action-button" value="Next" />
</fieldset>
<fieldset>

<div class="row rowINdata">
<div class="col-md-12 coldatatxt " style="text-align:left; direction:ltr;"> 
<span class="data-name"> 
Introduce your self and talk about your hobbies  (20-50 Words) : </span></div>
<div class="col-md-12 coldatainput"><div class="wrap-input100 validate-input" data-validate = "">
<textarea name="about" class="input100 txtarea req"  id="about"   placeholder="Your Answer" >
</textarea>
</div></div>
</div>
<input type="button" name="prevIoUs" class="prevIoUs action-button" value="prevIoUs" />
<input type="button" name="next" class="next action-button" value="next" />
</fieldset>

 <fieldset>
 <div class="row rowINdata">
 <div class="col-md-12 coldatatxt " style="text-align:left; direction:ltr;"> 
 <span class="data-name">Introduce your self and talk about your hobbies  (20-50 Words) : </span>
  </div>
  <div class="col-md-12 coldatainput"><div class="wrap-input100 validate-input" data-validate = "">
  <textarea name="about" class="input100 txtarea req"  id="about"   placeholder="Your Answer" >
  </textarea>
   </div></div>
   </div>

<br>
<input type="button" name="prevIoUs" class="prevIoUs action-button" value="prevIoUs" />
<input type="submit" name="Send" class=" action-button" id="send" value="send" />
</fieldset>

</form>
</div>

js：

 $(function() {

 var current_fs,next_fs,prevIoUs_fs; 
 var left,opacity,scale; 
 var animating;



 $(".next").click(function(){
if(animating) return false;
animating = true;

current_fs = $(this).parent();
next_fs = $(this).parent().next();
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
next_fs.show(); 
current_fs.animate({opacity: 0},{
    step: function(Now,mx) {
        scale = 1 - (1 - Now) * 0.2;
        left = (Now * 50)+"%";
        opacity = 1 - Now;
        current_fs.css({'transform': 'scale('+scale+')'});
        next_fs.css({'left': left,'opacity': opacity});
    },duration: 1000,complete: function(){
        current_fs.hide();
        animating = false;
    },easing: 'easeInOutBack'
});
});

$(".prevIoUs").click(function(){
if(animating) return false;
animating = true;

current_fs = $(this).parent();
prevIoUs_fs = $(this).parent().prev();
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
prevIoUs_fs.show(); 
current_fs.animate({opacity: 0},mx) {
        scale = 0.8 + (1 - Now) * 0.2;
        left = ((1-Now) * 50)+"%";
        opacity = 1 - Now;
        current_fs.css({'left': left});
        prevIoUs_fs.css({'transform': 'scale('+scale+')','opacity': opacity});
       },easing: 'easeInOutBack'
});
});

$(".submit").click(function(){
$("#msform")[0].submit();
return false
})

 });

解决方法

我认为这很好：

$("#ButtonId").on("click",function(event) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;

if ($("#InputBoxID").val() < 100) {
    $("#FormId").submit();
}
else {
    alert("your message");
}
});