javascript - 验证失败时文本字段周围有红色边框

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

你忘了在 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>