如何在验证数据不起作用后提交表单?

时间:2016-10-27 20:48:14

标签: javascript jquery html forms

我正在尝试打开一个包含表单的对话框,我希望能够检查此表单上的数据。一旦数据被验证,我想提交它。我没有在本地下载php,所以我添加了警告框,但是当我提交它没有任何反应。对话框无法关闭。

我是新人,因此我的理解是,当我查询$('#dialog-form form')时,我应该可以应用提交功能。

编辑:将表单操作更改为操作=" javascript:alert('成功!')"。我认为问题出在jquery $("#dialog-form form").submit();中。表单没有提交,在提交有效数据后不允许它关闭。



function addUser() {
  var valid=true;
  if ( valid ) {
			$("#dialog-form form").submit(); 
			$(this).dialog("close");
      		}
      		return valid;
}
dialog=$("#dialog-form").dialog({
		autoOpen: false,
		closeOnEscape: true,
		height: 500,
		width: 400,
		title: "title",
		modal:true,
		open: function() {
        		$('.ui-widget-overlay').addClass('custom-overlay');
    		},
		buttons: {
			"Sign up": addUser,
			Cancel: function(){
				dialog.dialog("close");
			}
		},
		close: function() {
			form[ 0 ].reset();
        	allFields.removeClass( "ui-state-error" );
			tips.removeClass( "ui-state-highlight" );
			tips.text("text.");
		},
		show: { effect: "drop", direction: "up", duration: 800 }
		
	});
	form = dialog.find( "form" ).on( "submit", function( event ) {
      		event.preventDefault();
      		addUser();
    	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dialog-form">
			<p class=""></p>

			<form action="javascript:alert('Success!')">
				<fieldset>
					<input type="text" id="fname">
					<input type="text" id="lname">
					<input type="text" id="eid">
					<input type="email" id="email">
					<input type="password" id="pwd">
					<input type="password" id="conf-pwd">
				</fieldset>
			</form>
		</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

action=将URL作为其值,而不是纯JavaScript。尝试将其更改为:

<form action="javascript:alert('Success!')">

答案 1 :(得分:0)

在玩完代码后我更新了我的答案。试试这个:

function addUser() {
  var valid=true;
  if ( valid ) {
            $("#dialog-form form").submit(); 

            }

}
dialog=$("#dialog-form").dialog({
        autoOpen: true,
        closeOnEscape: true,
        height: 500,
        width: 400,
        title: "title",
        modal:true,
        open: function() {
                $('.ui-widget-overlay').addClass('custom-overlay');
            },
       buttons: [{ 
          text: "Sign Up", 
          click: function() { 
            addUser();
            $(this).dialog("close");
          }
       }],
        close: function() {
            form[ 0 ].reset();
            allFields.removeClass( "ui-state-error" );
            tips.removeClass( "ui-state-highlight" );
            tips.text("text.");
        },
        show: { effect: "drop", direction: "up", duration: 800 }

    });