5

私はサイト構築の最終段階にあり、1つの重要なタスクが残っています。それは、ユーザーが空白の検索を送信できないようにするフォーム検証を設定することです。

私は次の投稿を知っていますが、それを機能させる方法と、これをドロップダウンに使用する方法についてこれが不明確であることがわかりました（jQuery Validate-グループ内の少なくとも1つのフィールドに入力する必要があります）

私がこれをどのように行うことができるかについてのアイデア、または役立つかもしれないガイドへのポインタは、大いに感謝されますか？

4

4 に答える 4

11

これは、すべてのフォームフィールドタイプtextで機能する必要がある関数です： 、、、、、、、、および。のようなHTML5入力タイプ。この関数が行う唯一の仮定は、すべての要素がwithを持っているということですselectradiocheckboxtextareafileemailselectoptionvalue=""

/**
 * 1) gather all checkboxes and radio buttons
 * 2) gather all inputs that are not checkboxes or radios, and are not buttons (submit/button/reset)
 * 3) get only those checkboxes and radio buttons that are checked
 * 4) get only those field elements that have a value (spaces get trimmed)
 * 5) if the length of both resulting collections is zero, nothing has been filled out
 */
function checkFields(form) {
    var checks_radios = form.find(':checkbox, :radio'),
        inputs = form.find(':input').not(checks_radios).not('[type="submit"],[type="button"],[type="reset"]'),
        checked = checks_radios.filter(':checked'),
        filled = inputs.filter(function(){
            return $.trim($(this).val()).length > 0;
        });

    if(checked.length + filled.length === 0) {
        return false;
    }

    return true;
}

$(function(){
    $('#myForm').on('submit',function(){
        var oneFilled = checkFields($(this));
        // oneFilled === true if at least one field has a value
    });
});​

これがデモです：

---jsFiddleデモ---

于 2012-08-22T17:12:16.700 に答える
1 
//select all text inputs in form and filter them based on...
var isFilled = $('input[type="text"]', 'form').filter(function() {
    return $.trim(this.value).length;  //text inputs have a value
}).length;                             //get the selector length

//if selector contains at least one filled in text input, submit form
if (isFilled) {..submit form..}
于 2012-08-22T16:36:42.213 に答える
1

私は専門家ではありませんが、これは私にとってはうまくいきます。寄付用の選択フィールドと入力フィールドがあります。金額が選択オプションにない場合、ユーザーは入力フィールドに金額を追加できます。したがって、少なくとも1つは提出する必要があります。

    function validateForm() {  
if (  myform.mySelectfield.value == "" 
    && myform.myInputfield2.value == "" 
    ) {
alert( "Please enter at least field" );
     return false;    
     }   
     } 
//-->

そしてもちろん、入力フィールドは数値である必要があるので、次を追加しました。

 function validateForm2() {

var x = document.forms["myform"]["myInputfield2"]。value;

if (/[^0-9]+$/.test(x))
    {
    alert("Please enter a numerical amount without a decimal point");
    myform.myInputfield2.focus();
    return false;
  }

}

数値チェックはonkeyupと呼ばれます。

onkeyup="validateForm2()"

最初の関数では数値チェックが機能しなかったため、2番目の関数validateForm2（）を作成する必要がありました。

于 2013-03-28T19:42:56.453 に答える
0 
var filled = $('.property-list input[type="text"]').filter(function() {
    var v = $(this).val();
    // sanitize it first
    v = v.replace(/[\s]{2,}/g,' ').replace(/^\s*(.*?)\s*$/,'$1');
    $(this).val(v);
    // if you want it to contain min.
    // 3 consecutive alphanumeric chars, for example...
    return /[a-z0-9]{3,}/i.test(v);
}).get();
if (filled.length) {
    // do whatever with the result
    alert('all okay');
} else {
    $('.property-list input[type="text"]').focus().blur();
    // this is for the placeholders to refresh, at least in Safari...
    $('.property-list input[type="text"][value!=""]:first').focus();
    var msg = 'plase fill at least one field with min. 3 ';
    msg += 'consecutive alphanumeric characters';
    alert(msg);
}
于 2012-08-22T16:49:18.277 に答える