https://stackoverflow.com/questions/18467411
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianJust remove the onBlur="CheckName(document.dForm.name.value)" from your code. The validation will kick in when you submit your page.
onBlur tag removal in javascript?
-
26-06-2022 - |
Question
I have a javascript file and I created it to work as the following: -It will verify the name and the email entered in the fields of my html form. If the email or the name is invalid, the javascript will launch an alert to the user and warn him that the email or the name you entered is not valid.
Anyway, this alert will be poped-up "onBlur".(when the cursor quits the name and the email field)
I want to remove the "onBLur" tag. I want the verification to take place at the end of the form filling, when the user click "Submit".
How to do that? With which tag I must replace the "onBlur"? Btw I tried replacing "onBlur" with "onClick": The alert appeared when I click on the field to fill it up.
This is the javascript placed between the head and /head tags in my html**
<script language=javascript>
<!--
function ValidateAll()
{
if(CheckName(document.dForm.name.value) == false) return false;
if(CheckEmail(document.dForm.email.value) == false) return false;
return true;
}
function StripSpacesFromEnds(s)
{
while((s.indexOf(' ',0) == 0) && (s.length > 1))
{
s = s.substring(1,s.length);
}
while((s.lastIndexOf(' ') == (s.length - 1) && (s.length > 1)))
{
s = s.substring(0,(s.length - 1));
}
if((s.indexOf(' ',0) == 0) && (s.length == 1)) s = '';
return s;
}
function IsItPresent(s,explanation)
{
s = StripSpacesFromEnds(s);
if(s.length) return s;
alert('Please enter ' + explanation + '.');
return '';
}
function CheckName(s_name)
{
s_name = IsItPresent(s_name,'your name');
if(! s_name) return false;
var i = s_name.indexOf(' ',0);
while(i > -1)
{
s_name = s_name.substring(0,(i + 1)) +
s_name.substring((i + 2),s_name.length);
i = s_name.indexOf(' ',0);
}
s_name = s_name.toLowerCase();
var s = new String(s_name.substring(0,1));
s = s.toUpperCase();
s_name = s + s_name.substring(1,s_name.length);
i = s_name.indexOf(' ',0);
if(i == (s_name.length - 1)) i = -1;
var ts = new String("");
var j = 0;
while(i > -1)
{
i++;
j = i + 1;
s = s_name.substring(i,j);
s = s.toUpperCase();
ts = '';
if(i > 0) ts = s_name.substring(0,i);
s_name = ts + s + s_name.substring(j,s_name.length);
i = s_name.indexOf(' ',j);
if(i == (s_name.length - 1)) i = -1;
}
document.dForm.name.value = s_name;
return true;
}
function CheckEmail(s_email)
{
s_email = IsItPresent(s_email,'your email address');
if(! s_email) return false;
var i = s_email.indexOf(' ',0);
while(i > -1)
{
s_email = s_email.substring(0,i) +
s_email.substring((i + 1),s_email.length);
i = s_email.indexOf(' ',0);
}
document.dForm.email.value = s_email;
if((s_email.length < 6) ||
(s_email.indexOf('@',0) < 1) ||
(s_email.lastIndexOf('@') != s_email.indexOf('@',0)) ||
(s_email.lastIndexOf('@') > (s_email.length - 5)) ||
(s_email.lastIndexOf('.') > (s_email.length - 3)) ||
(s_email.lastIndexOf('.') < (s_email.length - 4)) ||
(s_email.indexOf('..',0) > -1) ||
(s_email.indexOf('@.',0) > -1) ||
(s_email.indexOf('.@',0) > -1) ||
(s_email.indexOf(',',0) > -1))
{
alert('The email address "' + s_email + '" is not valid.');
return false;
}
return true;
}
// -->
</script>
And this is the html form (Without the javascript between the head and /head tags
<html>
<head>
<style type=text/css>
.inputtext { width: 300px; height:30px; }
<!--
.button {
display:block;
font-weight:bold;
font-size:18px;
font-family:Calibri;
color:#009933;
background-color:#ffffff;
width:150px;
text-align:center;
padding:4px;
border-top: 1px solid #b2b2b2;
border-bottom: 1px solid #b2b2b2;
border-left: 1px solid #b2b2b2;
border-right: 1px solid #b2b2b2;
}
-->
</style></head>
<form name="dForm" action="script.cgi" method="POST">
<div align=center>
<Table border=0><tr><td>
<table border=0>
<tr>
<td valign=top><h3><font face=calibri color=#009933>Full name<font face=calibri color=red>*</font> </h3></td>
<td valign=top><input onBlur="CheckName(document.dForm.name.value)" name="name" type="text" class=inputtext></td>
</tr>
<tr>
<td valign=top><font face=calibri color=#009933><h3>Email address<font face=calibri color=red>*</font></h3></td>
<td valign=top><input onBlur="CheckEmail(document.dForm.email.value)" name="email" type="text" class=inputtext></td>
</tr>
<tr>
<td valign=top><font face=calibri color=#009933><h3>Select your gender</h3></font></td>
<td valign=top><font face=calibri><input type="radio" name="gender" value="Male"> Male       <input type=radio name=gender value=Female> Female</font></td>
</tr>
<tr>
<td valign=top><font face=calibri color=#009933><h3>Select your age</h3></font></td>
<td valign=top><select name="age" size=1>
<option value=Below18>Below 18</option>
<option value=18>18</option>
<option value=19>19</option>
<option value=20>20</option>
<option value=21>21</option>
<option value=22>22</option>
<option value=23>23</option>
<option value=24>24</option>
<option value=25>25</option>
<option value=26>26</option>
<option value=27>27</option>
<option value=28>28</option>
<option value=29>29</option>
<option value=30>30</option>
<option value=31>31</option>
<option value=32>32</option>
<option value=33>33</option>
<option value=34>34</option>
<option value=35>35</option>
<option value=36>36</option>
<option value=37>37</option>
<option value=38>38</option>
<option value=39>39</option>
<option value=40>40</option>
<option value=41>41</option>
<option value=42>42</option>
<option value=43>43</option>
<option value=44>44</option>
<option value=45>45</option>
<option value=46>46</option>
<option value=47>47</option>
<option value=48>48</option>
<option value=49>49</option>
<option value=50>50</option>
<option value=51>51</option>
<option value=52>52</option>
<option value=53>53</option>
<option value=54>54</option>
<option value=55>55</option>
<option value=56>56</option>
<option value=57>57</option>
<option value=58>58</option>
<option value=59>59</option>
<option value=60>60</option>
<option value=61>61</option>
<option value=62>62</option>
<option value=63>63</option>
<option value=64>64</option>
<option value=65>65</option>
<option value=66>66</option>
<option value=67>67</option>
<option value=68>68</option>
<option value=69>69</option>
<option value=70>70</option>
<option value=71>71</option>
<option value=72>72</option>
<option value=73>73</option>
<option value=74>74</option>
<option value=75>75</option>
<option value=76>76</option>
<option value=77>77</option>
<option value=78>78</option>
<option value=79>79</option>
<option value=80>80</option>
<option value=81>81</option>
<option value=82>82</option>
<option value=83>83</option>
<option value=84>84</option>
<option value=85>85</option>
<option value=86>86</option>
<option value=87>87</option>
<option value=88>88</option>
<option value=89>89</option>
<option value=90>90</option>
<option value=91>91</option>
<option value=92>92</option>
<option value=93>93</option>
<option value=94>94</option>
<option value=95>95</option>
<option value=96>96</option>
<option value=97>97</option>
<option value=98>98</option>
<option value=99>99</option>
</select></td>
</tr>
</table>
<br><br>
<table border=0>
<tr><td valign=top>
<font face=calibri color=#009933><h3>1) From where did you hear about Angrybullet2 ?</h3></font>
<font face=calibri color=black><input type=radio name=hear-about value=Search_engines> Search engines (google, yahoo, bing, … )<br>
<input type=radio name=hear-about value=Fromafriend> From a friend<br>
<input type=radio name=hear-about value=FromYouTube> From YouTube<br>
<input type=radio name=hear-about value=Other> Other</font>
<br><br>
<font face=calibri color=#009933><h3>2) Are you subscribed to Angrybullet2 ?</h3></font>
<font face=calibri color=black>
<input type=radio name=sub-or-not value=Yes> Yes, I am<br>
<input type=radio name=sub-or-not value=No,but_I_wish_to_subscribe> No, but I wish to subscribe<br>
<input type=radio name=sub-or-not value=No,I_am_not,and_I_won't_subscribe> No, I am not, and I won't subscribe<br>
<input type=radio name=sub-or-not value=No_account> I don't have a YouTube account</font>
<br><br>
<font face=calibri color=#009933><h3>3) How many videos of Angrybullet2 did you watch ?</h3></font>
<font face=calibri color=black><input type=radio name=n videos watched value=None> None<br>
<input type=radio name=n-vids-watched value=1-2> 1-2<br>
<input type=radio name=n-vids-watched value=3-4> 3-4<br>
<input type=radio name=n-vids-watched value=5-9> 5-9<br>
<input type=radio name=n-vids-watched value=10_and_more> 10 and more</font>
<br><br>
<font face=calibri color=#009933><h3>4) Did you enjoy watching videos from Angrybullet2 ?</h3></font>
<font face=calibri color=black>
<input type=radio name=enjoy-or-not value=Yes,I_did> Yes, I did<br>
<input type=radio name=enjoy-or-not value=No,I_didn't> No, I didn't<br>
<input type=radio name=enjoy-or-not value=I_watched_none_of_your_videos> I watched none of your videos</font>
<br><br>
<font face=calibri color=#009933><h3>5) What was the type of the video(s) you watched ?</h3>Do not answer if you watched none of my videos</font><br>
<font face=calibri color=black>
<input type=checkbox name=vid-type[] value=Tutorial(s)> Tutorial(s) (how to)<br>
<input type=checkbox name=vid-type[] value=Sound effect(s)> Sound effect(s)<br>
<input type=checkbox name=vid-type[] value=Experiment(s)> Experiment(s)<br>
<br><br>
<font face=calibri color=#009933><h3>6) Do you have any suggestion in order to make Angrybullet2 better ?</h3></font>
<textarea rows="10" cols="75" name="suggestions"></textarea></td></tr></table>
<table border=0><tr><td valign=top>
<input onClick="return ValidateAll()" type="submit" value="Submit survey" class=button></td><td><input type="reset" value="Reset survey fields" class=button></td></tr></table>
</td></tr></Table>
</form>
</div>
</html>
Any help will be appreciated. Thanks in advance for your help and for your time
Solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
