相关疑难解决方法(0)

我正在使用占位符进行文本输入,这很好.但我也想为我的选择框使用占位符.当然我可以使用这段代码:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

但是"选择你的选项"是黑色而不是光线.所以我的解决方案可能是基于CSS的.jQuery也很好.

这只会使下拉列表中的选项变为灰色(因此点击箭头后):

option:first {
    color: #999;
}

编辑:问题是:人们如何在选择框中创建占位符？但它已经得到了回答,欢呼.

使用此选项会导致所选值始终为灰色(即使选择了实际选项后):

select {
    color: #999;
}

我一直在寻找方法让jQuery自动写入使用html5验证到我的所有输入字段,但我无法告诉它在哪里写它.

我想接受这个

 <input type="text" name="first_name" value="" id="freeform_first_name"
 maxlength="150">

并在结束标记之前自动添加所需内容

 <input type="text" name="first_name" value="" id="freeform_first_name"
 maxlength="150" required>

我以为我可以做一些事情

$("input").attr("required", "true");

但它不起作用.任何帮助是极大的赞赏.

以下代码在Safari中运行良好,但在Chrome和Firefox中,表单不会提交.Chrome控制台会记录错误An invalid form control with name='' is not focusable.有任何想法吗？

请注意,虽然下面的控件没有名称,但它们在提交时应该有名称,由下面的Javascript填充.表单可以在Safari中使用.

<form method="POST" action="/add/bundle"> 
<p> 
    <input type="text" name="singular" placeholder="Singular Name" required> 
    <input type="text" name="plural" placeholder="Plural Name" required> 
</p> 
<h4>Asset Fields</h4> 
<div class="template-view" id="template_row" style="display:none"> 
    <input type="text" data-keyname="name" placeholder="Field Name" required> 
    <input type="text" data-keyname="hint" placeholder="Hint"> 
    <select data-keyname="fieldtype" required> 
        <option value="">Field Type...</option> 
        <option value="Email">Email</option> 
        <option value="Password">Password</option> 
        <option value="Text">Text</option> 
    </select>    
    <input type="checkbox" data-keyname="required" value="true"> Required
    <input type="checkbox" data-keyname="search" value="true"> Searchable
    <input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
    <input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
    <input type="radio" …

我试图在单击表单提交按钮时使用Jquery触发一个函数,但该函数需要在实际提交表单之前触发.

我试图在提交时将一些div标签属性复制到隐藏文本字段中,然后提交表单.

我已设法使用鼠标悬停功能(当提交按钮悬停时)使其工作,但这不适用于使用触摸的移动设备.

$("#create-card-process.design #submit").on("mouseover", function () {
    var textStyleCSS = $("#cover-text").attr('style');
    var textbackgroundCSS = $("#cover-text-wrapper").attr('style');
    $("#cover_text_css").val(textStyleCSS);
    $("#cover_text_background_css").val(textbackgroundCSS);
});

我使用.submit函数,但是这些值不会保存在字段中,因为函数在提交表单时触发,而不是之前触发.

非常感谢

我面临众所周知的Chrome的"无法调焦输入"错误,但我的情况与我在那里找到的其他帖子中的解释不同.

我首先在一个指向良好的输入上重复此错误消息,此输入没有必需的属性:代码:

<fieldset>
    <label>Total (montaje incl.)</label>
    <input type="number" id="priceFinal" name="priceFinal"> €
</fieldset>

错误: name ='priceFinal'的无效表单控件不可聚焦.

当用户填写表单时,此字段通过带有jquery的js脚本获取其值.用户在另一个输入中键入一个大小,脚本使用大小值进行数学运算,然后使用jquery函数将结果放在'priceFinal'输入中:.val()

在浏览器中,我们可以看到输入正确填充,并且当时没有显示错误.并且使用'novalidate'解决方案一切都很顺利,所以我认为它不能对nofocusable错误负责.

然后我得到了同样的错误,输入没有名字,我没有写,我的DOM中不存在:

名称=''的无效表单控件不可聚焦.

这很奇怪,因为我的表单中没有名称的唯一输入是类型:submit one

<input type="submit" class="btn btn-default" value="Ver presupuesto" />

我有一些必填字段,但我总是检查他们在发送表单时都填写了.我粘贴它以防万一它可以帮助:

<fieldset>
    <input type="text" id="clientName" name="clientName" placeholder="Nombre y apellidos"  class="cInput" required >
    <input type="text" id="client_ID" name="client_ID" required placeholder="CIF / NIF / DNI" class="cInput">
</fieldset>
<fieldset>
    <input type="text" id="client_add" name="client_add" placeholder="Dirección de facturación" class="addInput" required >
</fieldset>

<fieldset>
    <input type="text" id="client_ph" name="client_ph" placeholder="Teléfono" class="cInput" required>
    <input type="email" id="client_mail" name="client_mail" placeholder="Email" class="cInput" required> 
</fieldset> …

我使用TinyMCE 4，这是我的代码：

<script type="text/javascript" src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
       tinymce.init({
         selector: 'textarea[name=content]',
         plugins: 'image code',
         toolbar: 'undo redo | link image | code',
         image_title: true, 
         automatic_uploads: true,
         file_picker_types: 'image', 
         file_picker_callback: function(cb, value, meta) {
           var input = document.createElement('input');
           input.setAttribute('type', 'file');
           input.setAttribute('accept', 'image/*');
           input.onchange = function() {
             var file = this.files[0];
             var reader = new FileReader();
             reader.onload = function () {
             var id = 'blobid' + (new Date()).getTime();
             var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
             var base64 = reader.result.split(',')[1];
             var blobInfo = blobCache.create(id, file, base64);
             blobCache.add(blobInfo);
             cb(blobInfo.blobUri(), …

我创建了一个使用jQuery拆分成许多“选项卡”的表单；以及在各个标签中找到的字段。

表单中的所有字段均已选中，某些是必填项，某些必须具有最小值，等等。

但是，当我尝试提交字段中包含无效值的表单时，如果这些字段位于与当前选项卡不同的选项卡下，则会在控制台上从Google Chrome浏览器收到错误消息：

无效的窗体控件不可聚焦

但用户看不到任何效果，也无法找到错误的字段，因为该字段尚未被浏览器突出显示。

我已经阅读了以下问题的答案：

• 名称=''的无效表单控件不可聚焦
• “无效的表单控件”仅在Google Chrome中
• 名称=''的无效表单控件不可聚焦。没有任何必填或隐藏的输入

但是，他们都说给字段指定正确的名称（已经完成）或删除“必需的属性”（不能这样做，因为一个原因！）。

我想强调一下，我也在进行服务器端验证，因此这不是此问题的主题。

如何在表单中保留HTML5验证，同时避免该错误？

编辑：

在这里，您可以找到我所描述的示例，尽管它比实际表单要简单得多，但是如果您将其加载到Google Chrome浏览器中并立即提交表单，则会在控制台中看到错误。

<form id="form_tabs" name="form_tabs" method="post" action="">
  <div id="tabs" class="ui-tabs">
    <ul>
      <li><a rel="tabs" href="#tab1">FIRST TAB</a></li>
      <li><a rel="tabs" href="#tab2">SECOND TAB</a></li>
    </ul>

    <div id="tab1" class="ui-tabs-hide">
      <input type="text" name="text1" id="text1" value="" placeholder="I am NOT required"/>
    </div>

    <div id="tab2" class="ui-tabs-hide">
      <input type="text" name="text2" id="text2" value="" placeholder="I REALLY am required!" required="required"/>
    </div>
  </div>

  <br/>
  <button type="submit" value="submit">
    SEND FORM
  </button>
</form>

名称='additional_here_about_other_field'的无效表单控件无法调焦. 此代码用于具有四个下拉列表的选择字段.需要几个选项:#additional_here_about_other_field和#additional_who_is_your_orthodontist_field.选择必填字段后,您必须在另一个显示/取消隐藏的文本字段中输入其他数据.当您选择所需选项然后切换到需要或不需要的选项并尝试提交表单时,您将获得不可聚焦的错误.看来,当您选择一个必填字段然后切换到另一个字段时,先前隐藏的前一个必填字段仍在等待验证？

jQuery(document).ready(function () {
	
	if(jQuery("#additional_here_about_other_field").length > 0){
		jQuery("#additional_here_about_other_field").hide();
		jQuery("#additional_how_did_u_hear_about_harp").change(function(){
			if(jQuery(this).val() == 'Other (please specify)'){ jQuery("#additional_here_about_other_field").show().prop('required',true); }
			else { jQuery("#additional_here_about_other_field").hide(); }
		});
	}
	if(jQuery("#additional_who_is_your_orthodontist").length > 0){
		jQuery("#additional_who_is_your_orthodontist").hide();
		jQuery("#additional_how_did_u_hear_about_harp").change(function(){
			if(jQuery(this).val() == 'Orthodontist Referral'){ jQuery("#additional_who_is_your_orthodontist").show().prop('required',true); }
			else { jQuery("#additional_who_is_your_orthodontist").hide(); }
		});
	}
});

HTML snippet

<select name="additional_how_did_u_hear_about_harp" id="additional_how_did_u_hear_about_harp" class="select " data-allow_clear="true" data-placeholder="How Did You Hear About The Harp?" >
	<option value=""  selected='selected'></option>
	<option value="Patient" >Patient</option>
	<option value="Orthodontist Referral" >Orthodontist Referral</option>
	<option value="Trade Show" >Trade Show</option>
	<option value="Mailer" >Mailer</option> …