删除边缘中必填字段的默认验证消息

Question

enter image description here我正在寻找一些解决方案来摆脱边缘所需字段的默认验证消息。

我已经在chrome中解决了这个问题，我消失了红色边框。我有这个HTML代码：

<div>
  <span>{{'First_Name' | translate}}</span>
  <span class="required-mark pc-only">*</span>
  <input name="fname" ng-model="$ctrl.formData.firstName" ng-change="$ctrl.updateField('firstName')" placeholder="{{'First_Name' | translate}}*" ng-focus="fnameVisited=true; fnameFocus=true;" ng-blur="fnameFocus=false;" ng-pattern="/^[\x20-\x2F\x3A-\x3B\x41-\x7E]*$/" required ng-minlength="2" ng-maxlength="40" oninvalid="setCustomValidity(' ')"/>
  <div ng-messages="member1.fname.$error" ng-if="(fnameVisited && !fnameFocus) || $ctrl.formSubmitted">
    <div ng-message="minlength" class="error-message">{{ 'err_length' | translate }}</div>
    <div ng-message="maxlength" class="error-message">{{ 'err_length' | translate }}</div>
    <div ng-message="required" class="error-message">{{ 'err_required' | translate}}</div>
    <div ng-message="pattern" class="error-message">{{ 'err_english' | translate}}</div>
  </div>
</div>

和css代码：

  input, select {
    width: 336px;
    height: 35px;
    float: right;
    padding-left: 12px;
    border: 1px solid $c-border-gray-1;
    font-family: 'open sans';
    background-color: $c-white;
    color: $c-gray-input-text;
  }

  input::placeholder {
    color: $c-white;
  }

  input:required:invalid {
    outline: none;
  }

  textarea:required:invalid {
    outline: none;
  }

谢谢！！

Answer 1

从字段中删除required属性。我的意思是，既然你没有改变错误信息本身，为什么要使字段成为必需。

更新

<form action="hey.php" id="hi">
<input id="required" onblur="check()">

</form>

<script>
var x=document.getElementById("required");
var y=document.getElementById("form");

function check()
{
if(x.value=='')
{
alert('please fill that field');
y.acton="#";
}
}




</script>