Question

我有一个正常提交的表单，现在我有2个需求需要在点击提交按钮时完成，如果这些要求已经完成，那么数据需要保存在数据库中

1）如果输入框留空，输入框的边框会突出显示

2）如果图片上传为空，则应显示上传按钮下方的书面消息，说明图片丢失

3）在填写所有输入框和图像上传之前，不应提交表格

4）如果有人能告诉我如何将所有输入框一起使用此代码而不是单独使用每个输入框，也会感激

目前，当我点击提交按钮时，如果该框为空，则会突出显示输入，但在此之后提交表单并且图像消息也没有显示

表格代码

<form action="<?php echo base_url(); ?>profile/add_profile" method="post" >
    <input id="user"  type="text" />
    <input id="pwd" type="text" />
    <input type="file" class="form-control modalcontrol" name="profile_img" id="profile_img" required>
        <span class="fileuploadlabl">Upload</span>
    <div class="login-btn">
        <button type="submit" class="btn btn-primary" name="submit" >SUBMIT</button>
    </div>
</form>

脚本代码

<script>
$( document ).ready(function() {

   $(".login-btn").click(function(){
     var user = $("#user").val();
    var pwd = $("#pwd").val();

     if(!user){

       $("#user").addClass("makeRed");
     }
       else
       {
       $("#user").removeClass("makeRed");
       }
  if(!pwd){

       $("#pwd").addClass("makeRed");
     }
       else
       {
       $("#pwd").removeClass("makeRed");
       }     
   });
    $("#user").click(function(){
       $("#user").removeClass("makeRed");

    });
      $("#pwd").click(function(){
        $("#pwd").removeClass("makeRed");

    });
});
</script>

CSS代码

.makeRed{

  border: 2px solid red !important;

}

Answer 1

您需要简单地迭代所有input以验证它们（评论内联）

$( document ).ready(function() {
   $(".login-btn").click(function(){ 
     $( "input, select" ).each( function(){ //iterate all inputs
        var $this = $( this );
        var value = $this.val();
        $this.removeClass( "makeRed" ); //reset the class first
        if ( value.length == 0 )
        {
           $this.addClass( "makeRed" ); //add if input is empty
        }
     });
   });
    $( "input,select" ).focus( function(){
       $( this ).removeClass( "makeRed" ); //on focus of the input remove the markRed class
    })
});

＆＃13;

$(document).ready(function() {
  $(".login-btn").click(function() {
    $("input, select").each(function() { //iterate all inputs
      var $this = $(this);
      var value = $this.val();
      $this.removeClass("makeRed"); //reset the class first
      if (value.length == 0) {
        $this.addClass("makeRed"); //add if input is empty
      }
    });
    if ( $(".makeRed").length > 0 )
    {
        alert( "Some validation errors" );
    }
  });
  $("input,select").focus(function() {
    $(this).removeClass("makeRed"); //on focus of the input remove the markRed class
  })
});

＆＃13;

.makeRed
{
   border-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="user" type="text" />
  <input id="pwd" type="text" />
  <input type="file" class="form-control modalcontrol" name="profile_img" id="profile_img" required>
  <span class="fileuploadlabl">Upload</span>
  <div class="login-btn">
    <button type="submit" class="btn btn-primary" name="submit">SUBMIT</button>
  </div>
</form>

＆＃13;

Answer 2

CTRL +,

从输入类型文件标记中删除所需的属性。

这将在提交时验证您的表单，而不是在点击时验证您的表单，因此这是更好的解决方案，而不是点击验证。

如果留空，则无法突出显示输入字段

2 个答案: