javascript - form_for 和 onsubmit() jQuery 函数

Question

我有这个表单供用户输入:

<%= form_for @user, :html => {:name=>"new_user", :method => :post, :onclick => "return validate(this);", :multipart => true} do |form| %>

   <fieldset>   
      <div class="field">
        <%= form.label :first_name %>
        <%= form.text_field :fist_name %>
      </div>

      <div class="field">
        <%= form.label :last_name %>
        <%= form.text_field :last_name %>
      </div>

      <div class="field">
        <%= form.label :email %>
        <%= form.text_field :email %>
      </div>

      <div class="field">
        <%= form.label :password %>
        <%= form.password_field :password %>
      </div>

      <div class="field">
        <%= form.label :confirm_password %>
        <%= form.password_field :password_confirmation %>
      </div>

      <div class="field">
        <%= form.label :country %>
        <%= form.select :country, User::COUNTRY, :prompt => 'Select your country' %>
      </div>

      <div class="field">
        <%= form.label :country_code %>
        <%= form.text_field :code, :size=>10 %>
      </div>


      <div class="field">
        <%= form.label :phone_No %>
        <%= form.text_field :phone, :size=>50 %>
      </div>          

      <div class="actions">
        <%= form.submit 'Submit'%>                 
      </div>          
    </fieldset>
  <% end %>

这是我的 Javascript 文件，名为 usersvalidations.js

function validate(new_user) {
var first = new_user.user_fist_name.value;
var second = new_user.user_last_name.value;
var nameRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
var email = new_user.user_email.value;
var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
var password = new_user.user_password.value;
var passwordconfirm = new_user.user_password_confirmation.value;
var country = new_user.user_country.value;
var code = new_user.user_code.value;
var phone = new_user.user_phone.value;




//name first//  
if(first==""){
    inlineMsg("user_fist_name", "You must enter your first name.", 8);
    return false;
}
if(!first.match(nameRegex)){
    inlineMsg("user_fist_name", "You have entered an invalid name.",8);
    return false;
}

 //name second//
if(second==""){
    inlineMsg("user_last_name", "You must enter your second name.", 8);
    return false;
}
if(!second.match(nameRegex)){
    inlineMsg("user_last_name", "You have entered an invalid name.", 8);
    return false;
}  

 //email//
if(email ==""){
    inlineMsg("user_email", "<strong> Error </strong> <br /> You must enter your email", 8);
    return false;       
}
if(!email.match(emailRegex)){
    inlineMsg("user_email", "<strong>Error</strong><br /> You have entered an invalid email", 8);
    return false;
}

//password//
if(password ==""){
    inlineMsg("user_password", "You must provide a password", 8);
    return false;
}

if(password.length < 6){
    inlineMsg("user_password", "Passwords must be 6 or more characters", 8);
    return false;
}
if(passwordconfirm != password){
    inlineMsg("user_password_confirmation", "Password don't match", 8);
    return false;
}

   //country//
if(country==0){
    inlineMsg("user_country", "You must choose atleast one option", 8)
    return false;
}

    //code//

if(code.length==0){
    inlineMsg("user_code", "You must provide your country code.", 8);
    return false;
}
code = code.replace("-","");
code = code.replace(" ","");
code = code.replace("(","");
code = code.replace(")","");
code = code.replace(".","");

for (i=0; i<code.length; i++) {
    if (code.charAt(i) < "0" || code.charAt(i) > "9") {
        inlineMsg("user_code", "Country code must only contain numbers.", 8);
    return false;
    }
}   


   //phone//
if(phone.length==0){
    inlineMsg("user_phone", "You must provide a phone number.", 8);
    return false;
}
phone = phone.replace("-","");
phone = phone.replace(" ","");
phone = phone.replace("(","");
phone = phone.replace(")","");
phone = phone.replace(".","");
if (phone.length != 10){
    inlineMsg("user_phone", "Phone numbers must only include a 3-digit area code and a 7-digit phone number.", 8);
    return false;
}   

for (i=0; i<phone.length; i++) {
    if (phone.charAt(i) < "0" || phone.charAt(i) > "9") {
        inlineMsg("user_phone", "Phone numbers must only contain numbers.", 8);
    return false;
    }
}


return true;
  }


// start of message script //

 var MSGTIMER = 20;
 var MSGSPEED = 5;
 var MSGOFFSET = 3;
 var MSGHIDE = 3;

 // build out the divs, set attributes and call the fade function //

   function inlineMsg(target,string,autohide) {
var msg;
var msgcontent;
if(!document.getElementById("msg")){
    msg = document.createElement("div");
    msg.id = "msg";
    msgcontent = document.createElement("div");
    msgcontent.id = "msgcontent";
    document.body.appendChild(msg);
    msg.appendChild(msgcontent);
    msg.style.opacity = 0;
    msg.alpha = 0;
} else {
    msg = document.getElementById("msg");
    msgcontent = document.getElementById("msgcontent");     
}

msgcontent.innerHTML = string;
msg.style.display = "block";
var msgheight = msg.offsetHeight
var targetdiv = document.getElementById(target);
targetdiv.focus();
var targetheight = targetdiv.offsetHeight;
var targetwidth = targetdiv.offsetWidth;
var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
msg.style.top = topposition + "px";
msg.style.left = leftposition + "px";
clearInterval(msg.timer);
msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
if(!autohide) {
    autohide = MSGHIDE;
}
window.setTimeout("hideMsg()", (autohide*1000));
  }

    // hide the form alert //

     function hideMsg(msg) {
  var msg = document.getElementById("msg");
   if(!msg.timer) {
    msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
 }
   }

   // face the message box //

  function fadeMsg(flag){
if(flag == null){
    flag = 1;
 }
var msg = document.getElementById("msg");
var value;
if(flag == 1){
    value = msg.alpha + MSGSPEED;
} else {
    value = msg.alpha - MSGSPEED;
}
msg.alpha = value;
msg.style.opacity = (value / 100);
msg.style.filter = "alpha(opacity=" + value + ")";
if(value >= 99){
    clearInterval(msg.timer);
    msg.timer = null;
} else if(value <=1){
    msg.style.display = "none";
    clearInterval(msg.timer);
}
}

 // calculate the position of the element in relation to the left of the browser //

   function leftPosition(target) {
 var left = 0;
 if(target.offsetParent){
    while(1) {
        left += target.offsetLeft;
        if(!target.offsetParent){
            break;
        }
        target = target.offsetParent;
    }
} else if(target.x) {
    left += target.x;
} 
return left;
    }

     // calculate the position of the element in relation to the top of the browser window //

  function topPosition(target){
var top = 0;
if(target.offsetParent){
    while(1){
        top += target.offsetTop;
        if(!target.offsetParent) {
            break;
        }
        target = target.offsetParent;
    }
} else if(target.y) {
    top += target.y;
}
return top;
    }

   // preload the arrow //

   if (document.images) {
arrow = new Image(7,80);
arrow.src = "msg_arrow.gif";
    }

电子邮件和密码无法正常工作，它们不显示验证消息，也不进行验证。

需要您的帮助。

Answer 1

尝试这样希望这对你有帮助。

 $( "#your-product-form-id" ).submit(function( event ) {
     if( your_validation_function() )
         return;
     else event.preventDefault();
 });