Question

我有这个网址：http://tecnifarm.com/contacto.php，其中的联系表单在Firefox和Safari中运行良好，但在Chrome上效果不佳。 1.邮箱向右移动几个像素。 2.即使我在完成一个输入屏蔽时从http://meyerweb.com/包含一个reset.css，背景颜色也会从#FFF变为黄色。 3.如果我填写邮件输入屏蔽，则会出现错误框，如果我没有完成，只需更改框的边框，颜色我不知道从哪里来。

这是de Form：

<link href="reset.css" type="text/css" rel="stylesheet">
       <link href="style.css" type="text/css" rel="stylesheet">
       <link href="formValidar/formValidar.css" type="text/css" rel="stylesheet">
       <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
       <link rel="image_src" href="img/logo.png"/> 
       <link href="img/favicon.ico" rel="shortcut icon">
<script type="text/javascript" src="formValidar/formValidar.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<form id="web" method="POST" action="mail.php">
            <div class="campos">     
                    <label class="tituloform" for="nombre">
                    </label>
                    <input name="nombre" class="ss-q-short" id="formNombre" type="text" value="NOMBRE COMPLETO" onFocus="this.value = this.value=='NOMBRE COMPLETO'?'':this.value;" onBlur="this.value = this.value==''?'NOMBRE COMPLETO':this.value;">
                    <label class="tituloform" for="telefono">
                    </label>
                    <input name="telefono" class="ss-q-short" id="formTelefono" type="text" value="TELEFONO" onFocus="this.value = this.value=='TELEFONO'?'':this.value;" onBlur="this.value = this.value==''?'TELEFONO':this.value;">
                    <label class="tituloform" for="email">
                    </label>
                    <input name="email" class="ss-q-short" id="formEmail" type="email" value="MAIL" onFocus="this.value = this.value=='MAIL'?'':this.value;" onBlur="this.value = this.value==''?'MAIL':this.value;">
                       <label class="tituloform" for="asunto">
                    </label>
                    <input name="asunto" class="ss-q-short" id="formAsunto" type="text" value="ASUNTO" onFocus="this.value = this.value=='ASUNTO'?'':this.value;" onBlur="this.value = this.value==''?'ASUNTO':this.value;">
                        <label class="tituloform" for="mensaje">
                    </label>
                    <textarea name="mensaje" class="ss-q-short" id="formMensaje" form="web" value="MENSAJE" onFocus="this.value = this.value=='MENSAJE'?'':this.value;" onBlur="this.value = this.value==''?'MENSAJE':this.value;"></textarea>
                </div>
            <div id="webFormResult"></div>
            <div>
                <p>
                <input type="submit" value="ENVIAR" class="submit" name"submit"/>
                </p>
            </div>
        </form>
            <script type="text/javascript" src="global.js"></script>

这是FormValidar.js

    function formValidar(form, definitions) {

    form.find('input, textarea, select').removeClass('errorMsgBorder');
    $('.msgError').remove();

    var camposErrorTitle = new Array();
    var camposErrorId = new Array();

    var definitionsLength = definitions.length;
    var i = 0;

    while(i<definitionsLength) {

        var id = definitions[i].id;
        var field = $('#'+id);
        var errorFound = false;

        switch ( definitions[i].type ) {

            case 'string':

                if( field.val() == '' ) {
                    errorFound = true;
                }

                if( typeof(definitions[i].minChar) != 'undefined' && field.val() != '' ) {
                    if( field.val().length < definitions[i].minChar ) {
                        errorFound = true;
                    }
                }

            break;

            case 'int':

                if( field.val() == '' ) {
                    errorFound = true;
                }

                if( parseInt( field.val() ) == 'NaN' ) {
                    errorFound = true;
                } else {
                    if( typeof(definitions[i].minValue) != 'undefined' ) {
                        if( parseInt( field.val() ) < definitions[i].minValue ) {
                            errorFound = true;
                        }
                    }
                    if( typeof(definitions[i].maxValue) != 'undefined' ) {
                        if( parseInt( field.val() ) > definitions[i].maxValue ) {
                            errorFound = true;
                        }
                    }               
                }

            break;

            case 'float':

                if( field.val() == '' ) {
                    errorFound = true;
                }

                if( parseFloat( field.val() ) == 'NaN' ) {
                    errorFound = true;
                } else {
                    if( typeof(definitions[i].minValue) != 'undefined' ) {
                        if( parseFloat( field.val() ) < definitions[i].minValue ) {
                            errorFound = true;
                        }
                    }
                    if( typeof(definitions[i].maxValue) != 'undefined' ) {
                        if( parseFloat( field.val() ) > definitions[i].maxValue ) {
                            errorFound = true;
                        }
                    }               
                }

            break;

            case 'email':
                var regex = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
                if( regex.test( field.val() ) == false || field.val() == '' ) {
                    errorFound = true;
                }
            break;

            case 'radio':

                var radioFields = $('[name="'+id+'"]');
                var radioFieldsId = new Array();
                var radioFieldBool = false;

                radioFields.each(function(){
                    if( $(this).prop('checked') == true ) {
                        radioFieldBool = true;
                    }
                    radioFieldsId.push( $(this).attr('id') );
                });

                if(radioFieldBool == false) {
                    errorFound = true;
                    for(f=0;f<radioFieldsId.length;f++) {
                        if( typeof(definitions[i].showErrorOn) != 'undefined' ) {
                            camposErrorId.push( $('.'+definitions[i].showErrorOn) );
                        } else {    
                            camposErrorId.push( $('label[for="'+radioFieldsId[f]+'"]') );
                        }
                    }
                }

            break;

        }

        if( errorFound == true ) {

            camposErrorTitle.push(definitions[i].title);

            if( definitions[i].type != 'radio' ) {

                if( typeof(definitions[i].showErrorOn) != 'undefined' ) {
                    camposErrorId.push( $('#'+definitions[i].showErrorOn) );
                } else {
                    camposErrorId.push(field);
                }

            } else {
                radioFieldsId = null;
            }

            errorFound = false;

        }

        i++;

    }

    if( camposErrorId.length > 0 ) {

        var errorTexto = "Por favor, completa los siguientes campos: "+camposErrorTitle.join(', ');
        form.find('input.submit').before('<div class="msgInline msgError">'+errorTexto+'</div>');
        for(i=0;i<camposErrorId.length;i++) {
            camposErrorId[i].addClass('errorMsgBorder');
        }

        errorPos = camposErrorId[0].offset();
        if( errorPos == null ) { errorPos = 0; }
        errorPos = parseInt( errorPos.top ) - 100;

        $('html,body').animate({
            'scrollTop': errorPos+"px"
        }, 800, 'swing');

        return false;

    } else {

        return true;

    }

}

这是formvalidar.ccs

    div.msg {
    margin: 14px 0 8px;
    padding: 10px;
    text-shadow: 0 1px 0 #FFF;
}

div.contenidoHome div.msg {
    width: 300px;
    margin: 14px auto 8px;
}

div.msgInline {
    margin: 0px 0px 8px;
    padding: 10px;
    text-shadow: 0 1px 0 #FFF;
    width:479px;
}

div.msgSuccess {
    border: 1px solid #FFF;
    background-color: transparent;
}

div.msgError {
    border: 1px solid #FFF;
    background-color: transparent;
    color: #222;
}

.errorMsgBorder {
    border-width: 1px;
    border-style: solid;
    border-color: #f00;
}

这是mail.php

<?php

$header = 'From: maia@jonetsugroup.com.ar' . "\r\n" .
'Reply-To: '.$_POST["email"]. "\r\n" .
'X-Mailer: PHP/' . phpversion();

$msg = '';

foreach($_POST as $k => $v) {
    $msg .= "$k: $v \n";
}

$res = mail('maia@jonetsugroup.com.ar', 'Contacto desde web', $msg, $header);

header('Content-type: text/json');


$res = true;

echo json_encode( array('result' => $res) );

?>

这是global.js

    $(document).ready(function(){

    $('form#web').submit(function(){

        var definitions = [
        {
            id: 'formNombre',
            type: 'string',
            title: 'nombre'
        },

        {
            id: 'formEmail',
            type: 'email',
            title: 'email'
        },

        {
            id: 'formAsunto',
            type: 'string',
            title: 'asunto'
        },
        {
            id: 'formMensaje',
            type: 'string',
            title: 'mensaje'
        }       
        ];

        if( formValidar($(this), definitions) ) {

            console.log($(this));

            $.post('mail.php', $(this).serialize(), function(json){

                if(json.result == true) {
                    $('#webFormResult').html('El mensaje se ha enviado correctamente');
                } else {
                    $('#webFormResult').html('No pudimos enviar el mensaje, intente nuevamente');
                }
                $("#web input[type=text],#web input[type=email], #web input[type=number], #web textarea, #web select").val('');

            });

            return false;

        } else {
            return false;
        }

    });
});

如果还有其它需要，请告诉我并感谢您的帮助！

Answer 1

将以下内容添加到第588行的style.css：

margin-left: 0px;

或者，在样式表的底部：

input[type=email] { margin-left: 0px; }

您可能希望按ID选择它。

这不是一个非常优雅的解决方案，但它可以解决您的问题。我建议将来使用像Boostrap这样的框架。此外，您的文档中有大量空标记可以删除。

希望这会有所帮助。祝你好运。

Answer 2

对于第一期，请将您的style.css输入min-width媒体资源替换为第596行的width媒体资源。

Chrome中的表单问题

2 个答案: