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

Posted 2023-05-09

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

【英文标题】：Prevent the user from pressing Next without filling in the required information and showing an alert message in wizard form html and javascript valid

【发布时间】：2021-08-06 11:15:45

【问题描述】：

请帮忙，因为我厌倦了编辑并且我无法将 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, 
    step: function(now, 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);
       , 
     duration: 1000, 
    complete: function()
        current_fs.hide();
        animating = false;
    , 
    easing: 'easeInOutBack'
);
);

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

 );

【参考方案1】：

我认为这很好：

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

if ($("#InputBoxID").val() < 100) 
    $("#FormId").submit();

else 
    alert("your message");

);