Javascript 值不为空时如何设置required

我想创建一个验证表单，其中边框输入为红色，然后使用jquery ajax设置为required或cant submit.iam

我正在使用ajax调用在服务器端进行一些验证，在收到响应后，我想决定是否提交表单

我想在“keyup”上使用jquery调用一些验证，然后如果输入得到验证错误，则设置需要的输入，以便用户无法提交

<input type="text" class="form-control" placeholder="Username" name="username" id="username" required/>

以下是我的代码：

<script type="text/javascript">
      $(document).ready(function(){
$('#username').on('keyup',function(){
  var selectData = $(this).val();
  var url ="Author/Fvalidation";
  $.ajax({
    type:"POST",
    url:"<?php echo base_url() ?>"+url,
    data:{'selectData':selectData},
    success:function(data){
      if (data === 'error') {
        $('#username').css("border","2px solid red");
        $('#username').removeAttr('value');
        $('#username').attr("required","true");
      }else {
          $('#username').css("border","2px solid green");

        }
    }
  });

});
      });
    </script>

$（文档）.ready（函数（）{
$（'#username'）。在（'keyup'，function（）上{
var selectData=$（this.val（）；
var url=“作者/Fvalidation”；
$.ajax({
类型：“POST”，
url:“+url，
数据：{'selectData'：selectData}，
成功：功能（数据）{
如果（数据=='错误'）{
$（'#username'）.css（“边框”，“2倍纯红”）；
$（“#用户名”）.removeAttr（'value'）；
$（'#username'）.attr（“必需”、“真实”）；
}否则{
$（'#username'）.css（“边框”，“2倍纯绿色”）；
}
}
});
});
});

HTML中的属性和属性之间存在差异。我将不讨论这个问题，但请参考以下内容：

您（可能）只想在情况发生变化时点击服务器，所以让我们使用该事件。使用类和CSS总是更好的，所以我们这样做

由于您在事件处理程序中，因此我们可以使用

$（this）

获取该元素，然后使用该元素，只需点击DOM一次

您还可以链接jQuery，这样我们就可以这样做了

至于PHP的东西，我不知道，但是只要它返回正确的“error”字符串，它就会工作

$（函数（）{
$（'#username'）。在（'change'，function（）上{
//缓存该项
var myInput=$（这是）；
var selectData=myInput.val（）；
var url=“”+“作者/验证”；
$.ajax({
类型：“POST”，
url:url，
数据：{
“selectData”：selectData
}
}).完成（功能（数据）{
如果（数据=='错误'）{
myInput.addClass（“isInValid”）
.removeClass（“isValid”）
.val（“”）；
//.attr（“必需”、“true”）；//元素上已存在此项
}否则{
myInput.addClass（“isValid”）
.removeClass（“isInValid”）；
}
});
}).addClass（“isInValid”）；//首先
//防止表格提交
//https://stackoverflow.com/q/9347282/125981
$（'#myfunform'）。在（'submit'，函数（事件）{
if（！！$（this）.find（'input'）.filter（'isInValid'）.length）{
event.preventDefault（）；；
}
});
});
.isInValid{
边框：2倍纯红；
}
.有效吗{
边框：2倍纯绿；
}
默认情况下，您应该将
required
属性指定给输入，这样，如果在页面加载后立即单击submit，并且输入为空，它会提示您输入消息，而不是在jquery/javascript端控制输入

然后为错误字段创建一个单独的
css
类，比如
.has error
，并在错误发生时将其应用于该字段

.has-error{
    color:red;
    border:2px solid red;
}

您可以分别使用
$.addClass（）
和
$.removeClass（）
绑定表单提交，使用
$.hasClass（）
检查输入是否有
错误
类，并使用
e.preventDefault（）
阻止提交，否则返回true以提交表单

您应该使用
.on（'input'）
事件，这样事件就不会在每次光标移动时触发，
input
事件确保某些内容已更改，忽略光标移动或空输入


$（文档）.ready（函数（）{
$（'#username'）。在（'input'，function（）上{
var username=$（“#username”）；
var selectData=$（this.val（）；
var url=“”+“作者/验证”；
$.ajax({
类型：“POST”，
url:url，
数据：{
“selectData”：selectData
},
成功：功能（数据）{
如果（数据=='错误'）{
username.addClass（“有错误”）.val（“”）；
}否则{
username.removeClass（“有错误”）；
}
},
错误：函数（xhr、错误、代码）{
username.addClass（“有错误”）.val（“”）；
}
});
});
$（“表格”）。在（'submit'，函数（e）{
if（！$（“#用户名”）.hasClass（'has-error'））{
返回true；
}
e、 防止违约；
})
});
。有错误{
边框：2倍纯红；
}

您面临什么问题？
$（“#用户名”）.removeAttr（'value'）可能
$（'#用户名'）.val（''你想要实现什么？您是否使用ajax调用在服务器端进行验证，并在收到响应后决定是否提交表单？@MuhammadOmerAslam是的，我希望这样添加一个答案，看看它是否有帮助我想在“keyup”上使用jquery如果您仍然想在
keyup
上使用，这是您的选择，您可以更改
input
至
keyup
行中的
$（“#用户名”）。on（'input'，function（）{
@farisdewantro