验证失败时文本字段周围的红色边框

Question

我尝试在验证失败时在我的联系表单上的文本字段上设置红色边框和可能的背景颜色。到目前为止，我得到了这个，但什么都没发生？

JS SCRIPT：

<script>

function checkforblank() {

    var errormessage = "";

    if (document.getElementById('fornavn').value == "") {
        errormessage += "skriv dit fornavn \n";
        document.getElementById('fornavn').style.borderColor = "red";

    if (document.getElementById('efternavn').value == "") {
        errormessage += "skriv dit fornavn \n";
        document.getElementById('efternavn').style.borderColor = "red";

    if (errormessage != "") {
        alert(errormessage);
        return false;
        }
    }

</script>

FORM CODE :(形式更长，这只是我测试的部分）

<form action="contact.php" method="post" id="comments_form">
    <div class="row">
    <div class="input3">
    <input type="text" id="fornavn" class="detail3" name="fornavn" onsubmit="return checkforblank()" placeholder="Fornavn*" value="<?php echo isset($_POST['fornavn'])? $_POST['fornavn'] : ''; ?>" /><?php if(in_array('fornavn',    $validation)): ?><span class="error"><?php echo $error_messages['fornavn']; ?></span><?php endif; ?>
    </div><!-- slut .input -->

    <div class="input3">
    <input type="text" id="efternavn" class="detail3" name="efternavn" placeholder="Efternavn*" value="<?php echo isset($_POST['efternavn'])? $_POST['efternavn'] : ''; ?>" /><?php if(in_array('efternavn',    $validation)): ?><span class="error"><?php echo $error_messages['efternavn']; ?></span><?php endif; ?>
    </div><!-- slut .input -->

    </div><!-- slut .row -->

PHP验证：

<?php


function validate_email_address($email = false) {
return (preg_match('/^[^@\s]+@([-a-z0-9]+\.)+[a-z]{2,}$/i', $email))? true : false;
}

function remove_email_injection($field = false) {
return (str_ireplace(array("\r", "\n", "%0a", "%0d", "Content-Type:", "bcc:","to:","cc:"), '', $field));
}

// Set email variables
$email_to = 'mail@sverkel.dk';
$email_subject = 'Formular: Kontakt os';

// Set required fields
$required_fields = array('fornavn', 'efternavn', 'vejnavn', 'nr', 'postnr', 'by', 'email', 'mobil', 'fastnet', 'besked');

// set error messages
$error_messages = array(
'fornavn' => 'Skriv dit fornavn',
'efternavn' => 'Skriv dit efternavn',
'vejnavn' => 'Skriv dit vejnavn',
'nr' => 'Fejl',
'postnr' => 'Skriv post nr.',
'by' => 'Skriv bynavn',
'email' => 'Skriv e-mail adresse',
'mobil' => 'Skriv mobilnummer',
'fastnet' => 'Skriv fastnetnummer',
'besked' => 'Skriv en besked'
);

// Set form status
$form_complete = FALSE;

// configure validation array
$validation = array();

// boolean variable to validate recaptcha
$valid_recaptcha = false;

if(isset($_POST['submit'])){
// First validate recaptcha

$url = 'https://www.google.com/recaptcha/api/siteverify';
$privatekey = "6LfEZw0TAAAAAOkn4MM4DfsMjmYoG0WetmhuLzmQ";
$response = file_get_contents($url."?secret=".$privatekey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);
$data = json_decode($response);
if($data->success) {
    $valid_recaptcha = true;
}

if($valid_recaptcha){

    // now process your form here. sanitize and validate input fields

    // Sanitise POST array
    foreach($_POST as $key => $value){
        $_POST[$key] = remove_email_injection(trim($value));
    }

    // Loop into required fields and make sure they match our needs
    foreach($required_fields as $field) {       

        // the field has been submitted?
        if(!array_key_exists($field, $_POST)){
            array_push($validation, $field);
        }

        // check there is information in the field?
        if($_POST[$field] == ''){
            array_push($validation, $field);
        }

        // validate the email address supplied
        if($field == 'email'){
            if(!validate_email_address($_POST[$field])){
                array_push($validation, $field);
            }
        }

    }

    // basic validation result
    if(count($validation) == 0) {

        // Prepare our content string
        $email_content = 'Ny besked fra kontaktformular: ' . "\n\n";

        // simple email content
        foreach($_POST as $key => $value){
            if($key != 'submit' && $key != 'g-recaptcha-response') $email_content .= $key . ': ' . $value . "\n\n";

        }

        // if validation passed ok then send the email
        mail($email_to, $email_subject, $email_content);

        // Update form switch
        $form_complete = TRUE;

    }

 }
}


?>

CSS代码：

#formWrap {
width:560px;
margin-top:10px;
margin-left:10px;
background:#FFF;
border:1px solid #FF0004;
-moz-border-radius:10px;
-moz-box-shadow:2px #DFDFDF;
-webkit-border-radius:10px;
-webkit-box-shadow:2px #DFDFDF;
padding:16px 10px 10px;
}

#formWrap #form {
border-top:1px solid #EEE;
width:560px;
}

#form .row {
border-bottom:1px solid #EEE;
display:block;
line-height:38px;
overflow:auto;
padding: 14px 0px;
width:100%;
}

#form .row .label {
font-size:16px;
font-weight:bold;
font-family:Helvetica, Arial, sans-serif;
width:120px;
text-align:right;
float:left;
padding-right:10px;
margin-right:10px;
}

#form .row .input {
display: inline-block;
float:left;
margin-right:10px;
width:auto;
}

#form .row .input2 {
display: inline-block;
float:left;
margin-right:25px;
width:50px;
}

#form .row .input3 {
display: inline-block;
float:left;
margin-right:10px;
width:auto;
}

#form .row .input4 {
display: inline-block;
float:left;
margin-right:10px;
width:auto;
}

#form .row .input5 {
display: inline-block;
float:left;
margin-right:10px;
width:auto;
}

#form .row .input6 {
display: inline-block;
float:left;
margin-right:10px;
width:auto;
}

#form .row .input7 {
display: inline-block;
float:left;
margin-right:10px;
width:auto;
}

.detail {
width:252px;
font-family:Arial, sans-serif;
font-size:13px;
padding:7px 8px;
margin:0;
display:block;
border-radius:5px 5px 5px 5px;
background:#EDEDED;
border:1px solid #CCC;
}

.detail2 {
width:47px;
font-family:Arial, sans-serif;
font-size:13px;
padding:7px 8px 8px;
margin:0;
display:block;
border-radius:5px 5px 5px 5px;
background:#EDEDED;
border:1px solid #CCC;
}

.detail3 {
width:252px;
font-family:Arial, sans-serif;
font-size:13px;
padding:7px 8px 8px;
margin:0;
display:block;
border-radius:5px 5px 5px 5px;
background:#EDEDED;
border:1px solid #CCC;
}

.detail4 {
width:531px;
font-family:Arial, sans-serif;
font-size:13px;
padding:7px 8px 8px;
margin:0;
display:block;
border-radius:5px 5px 5px 5px;
background:#EDEDED;
border:1px solid #CCC;
}

.detail5 {
width:232px;
font-family:Arial, sans-serif;
font-size:13px;
padding:7px 8px 8px;
margin:0;
display:block;
border-radius:5px 5px 5px 5px;
background:#EDEDED;
border:1px solid #CCC;
}

.detail6 {
width:100px;
font-family:Arial, sans-serif;
font-size:13px;
padding:7px 8px 8px;
margin:0;
display:block;
border-radius:5px 5px 5px 5px;
background:#EDEDED;
border:1px solid #CCC;
}

.detail7 {
width:403px;
font-family:Arial, sans-serif;
font-size:13px;
padding:7px 8px 8px;
margin:0;
display:block;
border-radius:5px 5px 5px 5px;
background:#EDEDED;
border:1px solid #CCC;
}

.mess {
width:531px;
max-width:531px;
height:200px;
overflow:auto;
font-family:Arial, sans-serif;
font-size:13px;
padding:7px 8px;
line-height:1em;
margin:0;
display:block;
border-radius:5px 5px 5px 5px;
background:#EDEDED;
border:1px solid #CCC;
}

.recaptcha {
color:#FF0004;
display:block;
font-family:Arial, sans-serif;
font-size:12px;
background-image:url(../images/x.png);
background-repeat:no-repeat;
background-position:left 6px;
padding-left:30px;
margin-left: 200px;

}

.detail:focus{
background-color:#FFF;
border:1px solid #999;
outline:none;
}

.detail2:focus{
background-color:#FFF;
border:1px solid #999;
outline:none;
}

.detail3:focus{
background-color:#FFF;
border:1px solid #999;
outline:none;
}

.detail4:focus{
background-color:#FFF;
border:1px solid #999;
outline:none;
}

.detail5:focus{
background-color:#FFF;
border:1px solid #999;
outline:none;
}

.detail6:focus{
background-color:#FFF;
border:1px solid #999;
outline:none;
}

.detail7:focus{
background-color:#FFF;
border:1px solid #999;
outline:none;
}

.mess:focus{
background-color:#FFF;
border:1px solid #999;
outline:none;
}

#form .row .context {
color:#999; 
font-size:11px;
font-style:italic;
line-height:40px;
font-family:Arial, sans-serif;
width:200px;
float:left;
}

#form #submit {
font-family:Arial, sans-serif;
margin-top:25px;
margin-left:0px;
color:#000;
font-size:16px;
padding:10px;
}

span.error {
color:#FF0004;
display:block;
font-family:Arial, sans-serif;
font-size:12px;
background-image:url(../images/x.png);
background-repeat:no-repeat;
background-position:left 6px;
padding-left:30px;

}

#formWrap h3 {
font-family:Arial, sans-serif;
display: inline-block;
margin-left:-1px;
}

#formWrap h6 {
font-family:Arial;
font-size: 12px;
font-weight: 100;
font-style: italic;
margin-left:-1px;
}

input.error {
border:1px solid #FF0004;
font-size:16px;
font-weight:bold;
font-family:Helvetica, Arial, sans-serif;
width:120px;
text-align:right;
float:left;
padding-right:10px;
margin-right:10px;
}

提供代码：新！

<script>

function checkForBlank() {

    var form = document.getElementById('comments_form');

        for(var i = 0; i < form.elements.length; i++) {

        if(form.elements[i].type != 'submit') {

        if(form.elements[i].value == '') {
            form.elements[i].style.borderColor = 'red';
        }
    }
  }
}
</script>

表格代码：

 <form action="contact.php" method="post" id="comments_form">
    <div class="row">
    <div class="input3">
    <input type="text" id="fornavn" class="detail3" name="fornavn" placeholder="Fornavn*" value="<?php echo isset($_POST['fornavn'])? $_POST['fornavn'] : ''; ?>" /><?php if(in_array('fornavn',    $validation)): ?><span class="error"><?php echo $error_messages['fornavn']; ?></span><?php endif; ?>
    </div><!-- slut .input -->

    <div class="input3">
    <input type="text" id="efternavn" class="detail3" name="efternavn" placeholder="Efternavn*" value="<?php echo isset($_POST['efternavn'])? $_POST['efternavn'] : ''; ?>" /><?php if(in_array('efternavn',    $validation)): ?><span class="error"><?php echo $error_messages['efternavn']; ?></span><?php endif; ?>
    </div><!-- slut .input -->

    </div><!-- slut .row -->

提交代码：

<div class="submit">
    <input type="submit" id="submit" name="submit" onclick="checkForBlank()" value="Send besked" />
    </div><!-- .submit -->

Answer 1

你忘了在if语句之后放}。 并且onsubmit是针对不是输入的形式。 这没有php部分应该工作：

   <form onsubmit="checkforblank()">
<input type="text" id="fornavn" class="detail3" name="fornavn" onsubmit="return checkforblank()" placeholder="Fornavn*" value="">


    <input type="text" id="efternavn" class="detail3" name="efternavn" placeholder="Efternavn*" value="">
    <input type="submit">
    </form>

<script>
function checkforblank() {

    var errormessage = "";

    if (document.getElementById('fornavn').value == "") {
        errormessage += "skriv dit fornavn \n";
        var input = document.getElementById('fornavn').style.borderColor = 'red';
    }
    if (document.getElementById('efternavn').value == "") {
        errormessage += "skriv dit fornavn \n";
        document.getElementById('efternavn').style.borderColor = "red";
}

    if (errormessage != "") {
        alert(errormessage);
        return false;
        }
    }

    </script>