Question

＆＃13;

$('.login_links_register').click(

function () {
    $("body").addClass("removeScroll");
    $(".login_form_container").show();
    $("#registerForm").show();
    $(".login_form_container").css('top', '0px');
    /*$('.overlay').addClass('visible');*/
});


$(document).on('click', ".close_button",

function (event) {
    var negativeHeight = -1 * ($('.login_form_container').offset().top + $(this).parents('.login_form_container').height());
    $(".login_form_container").css('top', negativeHeight);
    //$(".login_form_container").slideUp();
    /*$('.overlay').removeClass('visible');*/
    setTimeout(function () {
        $('.overlay').addClass('displayNone');
        $(".login_links").removeClass("popup_opened");
        $("#loginForm").hide();
        $("#registerForm").hide();
        $("body").removeClass("removeScroll");
    }, 500); /*Execute a set of statements after a statement completion. To make it faster reduce the milliseconds*/
});

＆＃13;

input[type="text"], input[type="password"] {
    border: 1px solid #aaa;
}
.header2 {
    background-color:#E1E3E5;
    /*have to change */
    /*padding: 15px 0;*/
}
.right {
    float: right;
    clear:both;
    /*To avoid problems caused by float - but check it may cause some problems check for it*/
}
/*Instead overflow:auto(or) hidden*/
 .clearboth::after {
    clear: both;
    content:"";
    display: block;
    visibility: hidden;
}
.displayNone {
    display: none;
}
.emailField, .passwordField {
    width: 200px;
    padding: 5px;
}
/*to remove unnecessary margin caused by ul element */
 .login_links_list {
    /*margin:10px 0;*/
    padding: 0px;
    margin: 0;
}
.login_links.right {
    margin-right: 70px;
    /*Same as Login container*/
}
/*login_link ul li element*/
 .login_links_list_ele, .login_links_list_label
/*can apply al these properties to anchor tag instead li */
 {
    float: left;
    list-style: outside none none;
    transition: all 0.5s ease 0s;
}
.login_links_list_label {
    padding: 15px;
}
.login_links_register, .login_links_login {
    /*border-right:1px solid #ccc;
  border-left: 1px solid #ccc;*/
    float:left;
    padding:15px;
}
.login_form_container.right {
    border: 1px solid #aaa;
    margin-right: 70px;
    /* For better alignment. Instead kissing the edge of the screen*/
    transition: all 1s ease 0s;
    position: relative;
    top: -173px;
    /* For Styling. instead displayNone*/
    z-index: 2;
}
/*positioning close button*/
 .close_button {
    cursor: pointer;
    float: right;
    position: relative;
    top: -15px;
    right: -15px;
    width: 17px;
}
.loginDiv.right {
    padding: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="headers header2 clearboth" id="header2">
	     <nav class="login_links right">
			<ul class="login_links_list right">
			   <li class="login_links_list_label">Are you a member?</li>
			   <li id="login_links_register" class="login_links_list_ele login_links_register">Register</li>
			   <li id="login_links_login" class="login_links_list_ele login_links_login">login</li>
			</ul>
		 </nav>
	 </div>
	 
	 <div class="login_form_container right displayNone">
		<form class="right registerForm" id="registerForm" method="POST" action="lib/registration_validate.php">
			<img class="close_button close_popup close_register_form" src="image/close_icon.png"></img>
			
			<div class="register_input">
				<input autocomplete="off" class="register_links emailID" type="text" placeholder="Email ID" name="email"/>
			</div>
			
			<div class="register_input">
				<input type="password" autocomplete="off" class="register_links password" placeholder="Password" name="password"/>
			</div>
			
			<div class="register_input">
				<input autocomplete="off" class="register_links conf_password" type="password" placeholder="Confirm Password" name="confirmPassword"/>
			</div>
			
			<div class="register_submission">
				<input type="submit" value="Register" name="submit" class="register_button"></input>
				<div class="custom_checkbox_div">
					<input id="custom_checkbox" class="custom_checkbox_input" type="checkbox" value="Remember Me" name="remMeCheckbox"/>
					<label for="custom_checkbox" class="custom_checkbox_label"></label>
					<label class="custom_checkbox_string" for="custom_checkbox">Remember Me</label>
				</div>														
			</div>

＆＃13;

这是在我的HTML页面中。我有negative top来显示和隐藏表单以获得更好的观看次数。

请告诉我以下疑惑

1）当用户提交表单时，我必须将数据发送到服务器。我做客户端和服务器端验证。如果客户端验证失败，我将在表单中显示错误。如果有server-side error，我如何在表单中显示？

我的想法：我必须在html页面中插入一些php error tags并更改我的filetype to php from html，以便在服务器端出现任何错误时i ll insert the error in those tags。

   <span class="error">* <?php echo $emailErr;?></span>

如上所述。

（或）

将用户带到另一个用户重新输入详细信息的php页面。并处理同一页面中的所有错误。

2）这种负顶型设计有什么问题？

请让我知道问题和合适的解决方案，以便我获得干净的设计。我不希望代码只是想法。

Answer 1

有几种方法可以做到这一点，但我会通过提供更多暗示你可以做的事情来保持低位。

使用AJAX提交表单？

如果验证在PHP中失败...
创建一个包含所有错误消息的关联数组，以及设置为submitError的{{1}}等关键字。
TRUE数组和json_encode或die它。
在JavaScript AJAX成功回调中，检查响应中是否存在return键。
如果submitError，则解析并显示您收到的JSON响应中的所有消息。完成！

不使用AJAX？

您可以利用true存储错误和相关消息＆amp;设置错误标志。
加载/提交页面时，请检查$_SESSION是否包含该标记。
如果是，请从会话中提取消息并显示给用户。
显示后，请清除$_SESSION

这些东西可以用于小型应用程序。如果您使用的是CodeIgniter或Laravel等某种框架，您可能需要查看会话flash 方法。

关于否定热门表单设计

我没有看到很多问题，除非它在打开时掩盖其下面的重要内容。特别是在移动版上（如果你打算这样做）。

我的表单设计逻辑有什么缺点？

1 个答案: