驗證失敗時在文本字段周圍的紅色邊框

Question

我試圖在驗證失敗時在我的聯繫表單上的文本字段上放置紅色邊框和背景顏色。到目前爲止，我得到了這個，但沒有發生？

JS腳本：

<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 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

你忘了}如果語句之後。 並且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>