0

入力エリアとテキストエリアの値にエラーメッセージを挿入した後、onclick で入力エリアとテキストエリアの値をクリアするためのヘルプを探しています。これが私のコードです：

HTML

<form name="form" action="contact-handler.php" method="post" onsubmit="return contact();">
    <input type="text" name="name" placeholder="Name:">
    <input type="text" name="email" placeholder="E-mail:">
    <select name="subject">
            <option value="0">Categories</option>     
            <option value="1">Web Design</option>
        <option value="2">Web Development</option>
        <option value="3">Graphic Design</option>
        <option value="4">Photography / Video</option>
        <option value="5">Marketing</option>
    </select>
    <textarea name="message" placeholder="Message:"></textarea>
    <input class="button" type="submit" value="Send">
</form>

JavaSript

function contact() {

    var name = form.name.value;
    var email = form.email.value;
    var atPosition = email.indexOf("@");
    var dotPosition = email.lastIndexOf(".");
    var subject = form.subject.value;
    var message = form.message.value;
    var flag = 0;

    // Name
    if(name != "" && name.length > 2 && !/[\d]/.test(name)) {
        flag++;
        form.name.style.border="1px solid #CCC";
    }
    else{
        form.name.style.border="1px solid #D73300";
        form.name.value="Please enter a valid name";
    }
    // Email
    if(email != "" && atPosition > 1 && dotPosition > atPosition + 2 && dotPosition + 2 <= email.length) {
        flag++;
        form.email.style.border="1px solid #CCC";
    }
    else{
        form.email.style.border="1px solid #D73300";
        form.email.value="Please enter a valid email";
    }
    // Subject  
    if(subject > 0) {
        flag++;
        form.subject.style.border="1px solid #CCC";
    }
    else{
        form.subject.style.border="1px solid #D73300";
    }
    // Message
    if(message != "" && message.length > 30) {
        flag++;
        form.message.style.border="1px solid #CCC";
    }
    else{
        form.message.style.border="1px solid #D73300";
        form.message.value="Please enter a valid message";
    }
    // Flag
    if(flag == 4) {
            return true;
        }
        else
        {
            return false;
        }   
}
4

2 に答える 2

1

placeholder入力値ではなく、属性の値を変更してください。スタイリングにはクラスを使用します。

form.element.className = 'error';
form.element.setAttribute('placeholder', "Can I haz a value?");

(フィドル)

より良い方法は、属性をフォーム要素に追加することです。その後、疑似クラスrequired="required"を使用してスタイルを設定できます。:invalid

input:invalid, textarea:invalid{
  border: ....
}
于 2013-02-17T00:44:41.723 に答える
0

バニラJSの方法：

window.onload = function() {
    var form = document.forms["form"];
    var formElems = form.getElementsByTagName('input');
    formElems.concat(form.getElementsByTagName('textarea'));

    for(i=0; i<formElems.length; i++) {
        formElems[i].onclick = function() {
            if(this.style.borderColor == '#CCC') {
               this.value = '';
            }
        }
    }
};

これを連絡機能の上に置きます。

于 2013-02-17T00:49:38.047 に答える