无法在我的表单中使用formvalidating来处理textarea

时间:2015-06-24 08:15:06

标签: javascript html5

我的问题是我无法通过验证来验证textarea id = Comment。 any1知道我应该做些什么来使它工作吗?

已经在stackoverflow,w3c和google上看了很多,但我还没有找到解决这个问题的方法:(

HTML:

<form method="POST" id="userform" class="col-xs-12" action="landingpage.html">
   <form method="POST" id="userform" class="col-xs-12" action="landingpage.html">
<fieldset>
    <legend>Udfyld formularen</legend>
    <div class="form-group">
        <label class="col-xs-4 control-label " for="fullName">Navn</label>
        <div class="col-xs-8">
            <input type="text" name="fullname" id="fullname" value="" data-field="required" class="form-control"  placeholder="Indtast fulde navn">
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-4 control-label " for="email">Email</label>
        <div class="col-sm-8">
            <input type="email" name="email" id="email" value="" data-field="required" class="form-control" placeholder="Indtast email">
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-4 control-label" for="Comment">Kommentar</label>
        <div class="col-sm-8">
            <textarea name="Comment" id="Comment" class="form-control" required ></textarea>
        </div>
    </div>
    <div class="col-xs-12">
        <div class="col-xs-4"></div>
        <button type="button" class="col-xs-4 btn btn-success" id="sendform">Send</button>
        <button type="reset" class="col-xs-4 btn btn-warning" >Nulstil felter</button>
    </div>
</fieldset>

JavaScript的:

$(function() {
    var result = 1;
    var strResult = "";

    $("#sendform").click(function() {
        $.each($("input"), function(index, value) {
            console.log($(this));
            if ($(this).data('field') === "required") {
                if (!$(this).val()) {
                    showError($(this), "Du skal udfylde feltet!");
                    result = 0;
                    $(this).bind("keypress", function() {
                        hideError($(this));
                        result = 1;
                    });
                    return false;
                } else {
                    if ($(this).attr("type") === "email") {
                        if (!isValidEmail($(this).val())) {
                            showError($(this), "Du skal indtaste en korrekt email!");
                            result = 0;
                            $(this).bind("keydown", function() {
                                hideError($(this));
                                result = 1;
                            });

                            return false;
                        }

                    }

                }


            }
        });
        if (result > 0) {
            strResult = "Navn:  " + $("#fullname").val() + "\n";
            strResult += "Email:  " + $("#email").val() + "\n";
            strResult += "kommentar:  " + $("#Comment").val(); + "\n";
            alert(strResult);
            //$("#userform").submit(); alert(field1+'&'+field2);
        }

    });
});

// show error msg

function showError(inputfield, strMsg) {
    if (!$(inputfield).next().hasClass("text-danger")) {
        $(inputfield).after("<span class=\"text-danger\">" + strMsg + "</span>");
    }
}

// hide error msg

function hideError(inputfield) {
    if ($(inputfield).next().hasClass("text-danger")) {
        $(inputfield).next().remove();
    }
}

// is value a number

function isValidNumber(value) {
        var pattern = /^[0-9]+$/;
        return pattern.test(value);
    }
    // is value containing letters

function isValidAlpha(value) {
        var pattern = /^[A-ZÆØÅa-zæøå ]+$/;
        return pattern.test(value);
    }
    // does email have a valid syntax

function isValidEmail(value) {
    var pattern = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    return pattern.test(value);
}

// does value have a valid length 

function isValidLength(value, min, max) {
    var pattern = RegExp('^[0-9A-Za-z@#$%]{' + min + ',' + max + '}$');
    return pattern.test(value);
}

1 个答案:

答案 0 :(得分:0)

首先,通过&#34; textarea&#34;作为每个()API的选择器。

$.each($("input, textarea"), function(index, value) {

其次,使用data-field =&#34; required&#34;对于textarea节点。

<textarea name="Comment" id="Comment" class="form-control" data-field="required"></textarea>

检查这个小提琴http://jsfiddle.net/bhdsvnnv/