验证并提交使用Javascript + Ajax的一种形式 [英] Validating and Submitting a form using Javascript + Ajax

问题描述

下面就是我想要做的事情。

• 在提交的形式被点击我的形式，一个JavaScript函数会通过表格的所有领域的循环。

• 对于每个字段一个函数将被调用这将返回真 / 假来表示，如果装入正确与否。

• 如果一个假返回，这表明旁边场的错误消息。

• 如果所有字段是正确的，它提交表单。如果不是，它不提交。

下面是棘手的部分。虽然大多数的验证正在通过JavaScript完成，用户名和电子邮件需要通过AJAX验证，看看用户名/电子邮件已被使用或不为。

我目前使用这个AJAX功能的结构是类似这样的：

 函数validateSomething（）
{
  VAR有效;
  $。员额（something.php，{X：Y}，
  功能（数据）
  {
     如果（isSomething（数据））
       有效= TRUE;
       //这里指的是有效的变量
       //设置该功能之外，在
       //父函数
     其他
       有效=虚假的;
  }）;
  返回有效/
}
 

不过，目前不能正常工作。

我能做些什么，使其工作，即我可以停止validateSomething（）函数返回一个值，直到它设置为真/假的内部函数？

可否像这样工作的：

 函数validateSomething（）
{
  VAR有效=未设置;
  $。员额（something.php，{X：Y}，
  功能（数据）
  {
     如果（isSomething（数据））
       有效= TRUE;
       //这里指的是有效的变量
       //设置该功能之外，在
       //父函数
     其他
       有效=虚假的;
  }）;
  //循环，而无需返回，直到有效设置为true或false
  而（有效==未设置）
  {
     //没做什么？
  }
  返回有效/
}
 

解决方案

您可以强制AJAX调用等与异步：假

像这样使用jQuery：

 函数validateSomething（）{
    VAR有效;
    $阿贾克斯（{
        网址：something.php
        数据：{X：Y}，
        键入：GET，
        异步：假的，//这使得AJAX调用拦截
        数据类型：JSON，
        成功：函数（响应）{
            有效= response.valid;
        }
     }）;
     返回有效的;
}
 

然而，使用AJAX当大赢的是，它是异步的。此同步调用可能会锁定浏览器，而它正在等待服务器。

Here's what I'm trying to do.

• When the 'Submit' form is clicked on my form, a javascript function will loop through all the fields of the form.

• For each field a function will be called which would return true/false to indicate if it was filled in correctly or not.

• If a false is returned, it shows an error message next to that field.

• If all fields are correct, it submits the form. If not, it doesn't submit.

Here's the tricky part. While most of the validation is being done via javascript, the username and email need to be validated via ajax to see if the username/email is already in use or not.

The structure i'm currently using for this ajax function is something similar to this:

function validateSomething()
{
  var valid;
  $.post("something.php", {x:y},
  function(data)
  {
     if (isSomething(data))
       valid=true; 
       //Here referring to the valid variable 
       //set outside this function, in the
       // parent function
     else
       valid=false; 
  });
  return valid/
}

But that currently doesn't work.

What can I do to make it work, i.e can I stop the validateSomething() function from returning a value until its set to true/false by the inner function?

Would something like this work:

function validateSomething()
{
  var valid="unset";
  $.post("something.php", {x:y},
  function(data)
  {
     if (isSomething(data))
       valid=true; 
       //Here referring to the valid variable 
       //set outside this function, in the
       // parent function
     else
       valid=false; 
  });
  //Loop without returning until valid is set to true or false
  while (valid=='unset')
  {
     //Do nothing?
  }
  return valid/
}

解决方案

You can force the ajax-call to wait with async: false.

Like this using jquery:

function validateSomething() {
    var valid;
    $.ajax({
        url: "something.php",
        data: {x: y},
        type: "GET",
        async: false, // this makes the ajax-call blocking
        dataType: 'json',
        success: function (response) {
            valid= response.valid;
        }
     });
     return valid;
}

However, the big win when using AJAX is that it is asynchronous. This synchronous call might lock up the browser while it is waiting for the server.

这篇关于验证并提交使用Javascript + Ajax的一种形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！