在 nyroModal 模式窗口中使用 ajax 验证和 javascript 提交

发布于 2024-08-02 14:38:20 字数 683 浏览 4 评论 0原文

当我单击按钮时,我有一个表单 (signup.php) 在 nyroModal 窗口中弹出:

<input value="Edit" class="nyroModal" type="button" href="signup.php">

我想在提交表单之前使用某种形式的 AJAX 验证(例如,检查用户名是否已被使用) 。

我想到了以下几点:当用户单击“提交”按钮时。它使用 onClick 调用 javascript 函数,将所需字段发送到 PHP 脚本,然后返回字段是否有效。然后,如果该字段无效,它会通知用户,但当该字段有效时,它会通过 $('#formid').submit(); 之类的方式提交表单。理论上很容易。

但是

问题是,当 nyroModel 从 URL 获取新表单,并在 DOM 中创建一个包含其中内容的 div 时,Firefox 完全忽略任何

有什么想法如何解决这个问题吗?

I have a form (signup.php) that pops up in a nyroModal window when I click a button:

<input value="Edit" class="nyroModal" type="button" href="signup.php">

I would like to use some form of AJAX validation (to check if the user name has been taken, for example) before submitting the form.

I had the following in mind: When the user clicks the 'submit' button. it calls javascript function with onClick that sends the required fields to a PHP script, which returns whether the fields are valid. Then, if the field is invalid, it notifies the user, but when the field is valid, it submits the form via something like $('#formid').submit();. Easy enough in theory.

BUT

Problem is, when the nyroModel gets the new form from a URL, and creates a div in the DOM with the contents in it, Firefox completely ignores any <script> tags. Using Firebug, I can see it actually gets the <script> tags with the response, but Firefox ignores them. Also, I can't create a jQuery function on the page that the model is called from, because when the document is created, the form doesn't exist in DOM yet.

Any ideas how to solve this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

仙气飘飘 2024-08-09 14:38:20

尝试向表单添加提交处理程序:

onClick='return frmSubmit()'

在此处理程序中,您首先序列化表单的数据,然后将其提交给验证脚本。请务必在发出请求后返回 false,因为它是异步完成的。在响应回调中,您实现以下操作:如果响应指示输入有效,则您可以使用 .submit() 方法以编程方式提交表单。但是,如果响应表明出现问题(您必须以 JSON 格式提供反馈),请将一些建设性反馈附加到表单中以供用户阅读。

不要忘记捕获按键事件,并防止按下 Enter 时提交表单,因为它将绕过您的验证功能。

而且,嗯,一个建议:最好一开始就在客户端进行所有验证,这通常就足够了。您可能听说客户端验证可以被绕过,因此仍然需要服务器端检查。然而,我总觉得,如果用户决定认真地破坏系统,那么就没有必要提供建设性的反馈。指示失败的简单消息就足够了。因此,首先使用纯 JavaScript 检查输入。如果有问题,请提供反馈。但是,如果服务器收到无效输入(这意味着客户端验证已被绕过),则只需通知用户他失败了。

Try adding a submit handler to the form:

onClick='return frmSubmit()'

In this handler, you first serialize the form's data, and submit this to the validation script. Be sure to return false after issuing the request, as it is done asynchronously. In the response callback, you implement the following: if the response indicates that the input is valid, you programatically submit the form with the .submit()-method. If, however, the reponse indicates that something's wrong (you'll have to supply the feedback in JSON-format), attach some constructive feedback to the form for the user to read.

Don't forget to catch the keypress event, and prevent the form from being submitted when Enter is pressed, as it will bypass your validation function.

And, uhm, one suggestion: it might be better to do all the validation on the client-side to start with, which is usually enough. You probably heard that client-side validation can be circumvented, so there is still a need for server-side checking. However, I always feel that if a user decides to mess with the system seriously, then it isn't necessary to provide constructive feedback. A simple message indicating failure will suffice. So, first check the input with plain Javascript. If something's wrong, provide feedback. If, however, the server receives invalid input (which means that the client-side validation has been bypassed), just notify the user that he failed.

上课铃就是安魂曲 2024-08-09 14:38:20

你可以使用类似的东西:

onClick='javascript: return myValidationFuncion()

你的函数将检查该值是否有效,
即在那里拨打您的网络服务电话。
如果值无效,只需返回 false 即可停止执行。

K

you could use something like:

onClick='javascript: return myValidationFuncion()

Where your function would check whether the value is valid,
i.e. make your web service call there.
If the values not valid, simply return false in order to stop the execution.

K

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文