Wie kann ich einem Eingabefeld einen roten Rahmen mit dem erforderlichen Attribut hinzufügen?

Question

Wenn derzeit ein Eingabefeld mit dem Attribut required leer ist, wird die Standardfehlermeldung des Browsers angezeigt. Wenn ich dieses Attribut entferne, wird auf dem Eingabefeld wegen meines JavaScript-Codes ein roter Rand angezeigt. Wie würde ich beide gleichzeitig anzeigen?

$("form").submit(function(e) { 
 
    e.preventDefault(); 
 
    var title = document.getElementById('title'); 
 
    if (!title.value) { 
 
    title.classList.add('error'); 
 
    setTimeout(function() { 
 
     title.classList.remove('error'); 
 
    }, 300); 
 
    } 
 
});

.error { 
 
    position: relative; 
 
    animation: shake .1s linear; 
 
    animation-iteration-count: 3; 
 
    border: 1px solid red; 
 
} 
 

 
@keyframes shake { 
 
    0% { 
 
    left: -5px; 
 
    } 
 
    100% { 
 
    right: -5px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" id="title"> 
 
    <input type="submit"> 
 
</form>

Answer 1

Sie können es wie folgt implementieren:

$("form").submit(function(e) { 
 
    e.preventDefault(); 
 
    // .... 
 
}); 
 

 
$("form input").on("invalid", function(event) { 
 
    $('#title').addClass('error'); 
 
    setTimeout(function() { 
 
    $('#title').removeClass('error'); 
 
    }, 500); 
 
});

.error { 
 
    position: relative; 
 
    animation: shake .1s linear; 
 
    animation-iteration-count: 3; 
 
    border: 1px solid red; 
 
    outline: none; 
 
} 
 

 
@keyframes shake { 
 
    0% { 
 
    left: -5px; 
 
    } 
 
    100% { 
 
    right: -5px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" id="title" required> 
 
    <input type="submit"> 
 
</form>

Answer 2

function validate() { 
 
    var title = document.getElementById('title'); 
 
    if (!title.value) { 
 
    title.classList.add('error'); 
 
    setTimeout(function() { 
 
     title.classList.remove('error'); 
 
    }, 300); 
 
    } 
 
}

.error { 
 
    border: 5px solid red; 
 
}

<form> 
 
    <input type="text" id="title" required> 
 
    <input type="submit" onclick="validate()"> 
 
</form>

von onsubmit geändert zu Onclick und Sichtbarkeit/emphasis an der Grenze zu Demonstrationszwecken hinzugefügt - es schwieriger war mit 1px und der Timeout-Fenster, um zu sehen .

Answer 3

Vielleicht einfach onclick auf Knopf verwenden?

Dann, falls die Validierung in Ordnung ist, könnten Sie programmatisch submit auf dem Formular aufrufen.

function validate() { 
 
    var title = document.getElementById('title'); 
 
    if (!title.value) { 
 
    title.classList.add('error'); 
 
    setTimeout(function() { 
 
     title.classList.remove('error'); 
 
    }, 3000); 
 
    } else { 
 
    document.getElementById('form').submit() 
 
    } 
 
}

.error { 
 
    border: 1px solid red; 
 
}

<form id="form"> 
 
    <input type="text" id="title" required> 
 
    <input type="submit" onclick="validate()"> 
 
</form>

Answer 4

die CSS verwenden.

Es ist besser, es auch für ungültige Felder zu verwenden (Text in Feld type=number oder irgendein anderer ungültiger Wert).

@keyframes shake3 { 
 
    0% {left: -5px} 
 
    16% {left: 5px} 
 
    33% {left: -5px} 
 
    49% {left: 5px} 
 
    66% {left: -5px} 
 
    80% {left: 5px} 
 
    100% {left: 0} 
 
} /* And @keyframes with prefixes */ 
 

 
input:invalid { 
 
    border: 2px solid red; 
 
    animation-name: shake3; 
 
    animation-duration: .4s; 
 
    position: relative; 
 
}

<input required >

Wenn Sie es nur zeigen wollen, wann Sie wollen, ersetzen input:invalid durch .submited input:invalid und fügen Sie die .submited Klasse Ihrer Form Stile zu aktivieren.