2013-05-04 26 views
1

我有這種形式的用戶輸入的form_for用的onsubmit()jQuery函數

<%= 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-\.][email protected]([\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"; 
    } 

電子郵件和密碼都不盡如人意,他們不顯示確認信息並且它們也不驗證

需要您的幫助

+0

你能簡化你的問題嗎?僅隔離驗證的代碼。 – juanpastas 2013-05-04 22:22:41

+0

感謝您的幫助。 AV解決了這個問題。此代碼完美工作,我有一個在同一表單中的登錄表單,所以我只是更改了登錄表單的電子郵件和密碼ID。 – 2013-05-05 05:37:34

回答

0

試試這個希望這對你有幫助。

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