javascript - 摆脱边缘必填字段的默认验证消息

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>