jQuery验证&尼斯选择一致吗？ [英] jQuery Validate & Nice Select consistent at all?

问题描述

尼斯选择使用jQuery验证吗？
因为我得到一个奇怪的错误，我会尝试解释它

• 没有提交表单，我可以从漂亮的选择插件中选择值，并正确更新（默认选择下拉菜单）值，并且我可以提交表单没有问题




• 现在，如果我刷新页面，那么我提交表单，jQuery错误验证附加，因为我没有选择一些值，所以我从（好的选择值）中选择一些值，现在它不更新（默认选择）值，所以我不能提交表单

我认为当验证插件被称为nice select不是动态更新，或者可能我想念一些东西

FIDDLE

html ：

 < form id =MyForm> 
< select id =MySelectname =select> 
< option value =>选择一个值< / option> 
< option value =1> 1< / option> 
< option value =2> 2< / option> 
< option value =3> 3< / option> 
< option value =4> 4< / option> 
< / select> 
< button id =MyButtontype =submit> Submit< / button> 
< / form> 
  

jQuery ：

$（$）$（$）$（$）$（$）$（$（$）$忽略：[]，
规则：{
选择：{
selectcheck：true
}
}
}）;

jQuery.validator.addMethod（'selectcheck'，function（value）{
return（value！=''）;
}，需要的值）;

/ / Activate NiceSelect
$（'＃MySelect'）。niceSelect（）;
}）;

任何帮助将不胜感激

谢谢提前

解决方案

jQuery Validate插件自动插入验证消息后，选择元素。然而，在您的情况下，当Nice Select div 被动态创建时，选择元素将被隐藏;验证插件无法再看到或切换标签。

使用 errorPlacement 功能将之后的验证消息放在尼斯选择 div 元素。我的自定义函数是通用的，适用于所有隐藏的选择元素。

  errorPlacement：function（error，element）{
 if（element.is（'select：hidden'））{
 error.insertAfter（element.next（'。nice-select'）） ; 
} else {
 error.insertAfter（element）; 
} 
} 
  

但是，这个答案还没有完成。 jQuery Validate插件通常会根据与 select 元素交互的用户进行验证。由于您的选择元素被隐藏，并且用户不直接与其进行交互，所以当Nice Select元素更改时，不会触发验证。

使用自定义更改处理函数，以确保每当更改Nice Select元素时，验证消息都会更新。 ..（'change'，function（）{
$（'＃MySelect'）。 this）.valid（）;
}）;

工作DEMO： https://jsfiddle.net/9yvz4ztv/

---

BTW：您不需要编写自定义规则，以确保选择元素包含一个值。只需使用所需的规则。

 规则：{
选择：{
 required：true 
} 
} 
  

Is Nice Select working with jQuery validate ? Because I get a strange bug, I'll try to explain it

• Without yet having submitted the form, I'm able to select the the value from nice select plugin and it update correctly the (default select dropdown) value and I can submit the form without problem

• Now if I refresh the page then I submit the form, the jQuery error validate appends as intended because I did not selected some value, so I select some value from (nice select value) and now it doesn't update the (default select) value so I can't submit the form

I thinks that when validate plug-in is called nice select is not dynamically updated, or maybe I miss some thing

FIDDLE

html :

<form id="MyForm">
   <select id="MySelect" name="select">
     <option value="">Select a value</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
   </select>
   <button id="MyButton" type="submit">Submit</button>
</form>

jQuery :

$(document).ready(function() { 
    // Form Validate 
    $('#MyForm').validate({ 
        ignore: [],
        rules: {
            select: {
                selectcheck: true
            }
        }
    });

    jQuery.validator.addMethod('selectcheck', function (value) {
        return (value != '');
    }, "Value required");

    // Activate NiceSelect
    $('#MySelect').niceSelect(); 
});

Any help would be appreciated

Thanks in advance

解决方案

The jQuery Validate plugin automatically inserts the validation message after the select element. However in your case, the select element is hidden when the Nice Select div is dynamically created; the Validate plugin can no longer see or toggle this label.

Use the errorPlacement function to place the validation message after the Nice Select div element. My custom function is generic and applies to all hidden select elements in the form.

errorPlacement: function(error, element) {
    if (element.is('select:hidden')) {
        error.insertAfter(element.next('.nice-select'));
    } else {
        error.insertAfter(element);
    }        
}

However, this answer is not yet complete. The jQuery Validate plugin normally triggers validation based on the user interacting with the select element. Since your select element is hidden and the user is not directly interacting with it, validation is not triggered whenever the Nice Select element is changed.

Use a custom change handler function to ensure that the validation message is updated whenever the Nice Select element is changed...

$('#MySelect').on('change', function() {
    $(this).valid();
});

Working DEMO: https://jsfiddle.net/9yvz4ztv/

---

BTW: You do not need to write a custom rule to ensure a select element contains a value. Simply use the required rule.

rules: {
    select: {
        required: true
    }
}

这篇关于jQuery验证&尼斯选择一致吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！