Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Pado
Behira Younes
Commits
c95ca4ef
Commit
c95ca4ef
authored
4 years ago
by
Ratnadeep Rajendra Kharade
Browse files
Options
Download
Email Patches
Plain Diff
added form validations
parent
044aab40
Pipeline
#1075
passed with stages
in 8 seconds
Changes
2
Pipelines
1
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
public/index.html
+19
-10
public/index.html
public/index.js
+55
-4
public/index.js
with
74 additions
and
14 deletions
+74
-14
public/index.html
+
19
-
10
View file @
c95ca4ef
...
...
@@ -33,16 +33,19 @@
<h3>
Please select an option
</h3>
</div>
<div>
<input
onclick=
"handleTextRadioClick()"
type=
"radio"
id=
"huey"
name=
"drone"
value=
"huey"
checked
>
<label
for=
"huey"
>
I will enter text manually.
</label></div>
<input
onclick=
"handleTextRadioClick()"
type=
"radio"
id=
"manual"
name=
"text-input-option"
value=
"manual"
checked
>
<label
for=
"manual"
>
I will enter text manually.
</label></div>
<div>
<input
onclick=
"handleTextRadioClick()"
type=
"radio"
id=
"dewey"
name=
"drone"
value=
"dewey"
>
<label
for=
"dewey"
>
I have already calculated the text length.
</label>
<input
onclick=
"handleTextRadioClick()"
type=
"radio"
id=
"calculated"
name=
"text-input-option"
value=
"calculated"
>
<label
for=
"calculated"
>
I have already calculated the text length.
</label>
</div>
<div
id=
"character-calculation-wrapper"
>
<div>
<textarea
oninput=
"handleTextAreaChange()"
placeholder=
"Enter text here..."
class=
"box-input"
name=
"textarea"
id=
"manual-text-entry"
cols=
"90"
rows=
"5"
value=
""
></textarea>
<div
id=
"textarea-validation"
style=
"color: red;display: none;"
>
Please enter text
</div>
</div>
<div>
<label
for=
"calculatedTextCharacters"
>
Total characters in text:
</label>
...
...
@@ -54,25 +57,30 @@
<label
for=
"inputTextCharacters"
>
Enter number of characters:
</label>
<input
oninput=
"handleCharacterInputChange()"
placeholder=
"e.g. 120"
class=
"box-input"
type=
"number"
id=
"inputTextCharacters"
name=
"inputTextCharacters"
value=
""
>
<div
id=
"textCharacters-validation"
style=
"color: red;display: none;"
>
Please enter number of characters.
</div>
</div>
</div>
<div>
<label
for=
"readerLevel"
>
Select reader level:
</label>
<select
class=
"box-input"
id=
"readerLevel"
>
<label
for=
"readerLevel"
>
Reader Level:
</label>
<select
class=
"box-input"
id=
"readerLevel"
onchange=
"readerLevelChangeEvent(event)"
>
<option
value=
""
>
Select level
</option>
<option
value=
"First Year"
>
First Year
</option>
<option
value=
"Second Year"
>
Second Year
</option>
<option
value=
"Third Year"
>
Third Year
</option>
<option
value=
"Fourth Year"
>
Fourth Year
</option>
</select>
<div
id=
"readerLevel-validation"
style=
"color: red;display: none;"
>
Please enter number of characters.
</div>
</div>
<div>
<label
for=
"readerLevel"
>
Select category of the reader:
</label>
<select
class=
"box-input"
id=
"readerLevel"
>
<label
for=
"readerCategory"
>
Reader Category:
</label>
<select
class=
"box-input"
id=
"readerCategory"
onchange=
"readerCategoryChangeEvent(event)"
>
<option
value=
""
>
Select category
</option>
<option
value=
"Mixed-ability group"
>
Mixed-ability group
</option>
<option
value=
"High-ability group"
>
High-ability group
</option>
<option
value=
"Good-ability group"
>
Good-ability group
</option>
<option
value=
"Average-ability group"
>
Average-ability group
</option>
</select>
<div
id=
"readerCategory-validation"
style=
"color: red;display: none;"
>
Please enter number of characters.
</div>
</div>
<div>
<div>
...
...
@@ -122,9 +130,10 @@
</section>
</section>
<script
src=
"index.js"
type=
"text/javascript"
>
</script>
<!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
<script
src=
"settings.js"
>
</script>
<script
src=
"index.js"
>
</script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
Click to expand it.
public/index.js
+
55
-
4
View file @
c95ca4ef
let
inputObj
=
{};
let
inputObj
=
{
textChoice
:
'
manual
'
,
text
:
''
,
textLength
:
''
,
readerLevel
:
''
,
readerCategory
:
''
};
function
handleTextRadioClick
()
{
let
textChoice
=
document
.
querySelector
(
'
input[name="
dr
on
e
"]:checked
'
).
value
;
let
textChoice
=
document
.
querySelector
(
'
input[name="
text-input-opti
on"]:checked
'
).
value
;
console
.
log
(
textChoice
);
inputObj
.
textChoice
=
textChoice
;
toggleElement
(
'
character-calculation-wrapper
'
);
toggleElement
(
'
manual-character-input
'
);
}
...
...
@@ -19,6 +26,7 @@ function toggleElement(id) {
function
handleTextAreaChange
()
{
let
value
=
document
.
getElementById
(
"
manual-text-entry
"
).
value
;
value
=
value
.
trim
();
inputObj
.
text
=
value
;
let
characters
=
value
.
split
(
'
'
).
join
(
''
).
length
;
setCharacterLength
(
characters
);
document
.
getElementById
(
"
calculatedTextCharacters
"
).
setAttribute
(
'
value
'
,
characters
)
...
...
@@ -30,16 +38,59 @@ function handleCharacterInputChange() {
}
function
setCharacterLength
(
characters
)
{
inputObj
.
characters
=
characters
;
console
.
log
(
'
Character length:
'
+
inputObj
.
characters
);
inputObj
.
textLength
=
characters
;
console
.
log
(
'
Character length:
'
+
inputObj
.
textLength
);
}
function
calculateReadingTime
()
{
let
isFormValid
=
validateForm
();
let
x
=
document
.
getElementById
(
'
calculate-time-element
'
);
x
.
style
.
display
=
"
block
"
;
}
function
validateForm
()
{
let
invalidFields
=
0
;
if
(
inputObj
.
textChoice
===
'
manual
'
&&
inputObj
.
text
===
''
)
{
invalidFields
++
;
document
.
getElementById
(
'
textarea-validation
'
).
style
.
display
=
'
block
'
;
}
else
{
document
.
getElementById
(
'
textarea-validation
'
).
style
.
display
=
'
none
'
;
}
if
(
inputObj
.
textChoice
===
'
calculated
'
&&
(
inputObj
.
textLength
===
''
||
inputObj
.
textLength
===
0
))
{
invalidFields
++
;
document
.
getElementById
(
'
textCharacters-validation
'
).
style
.
display
=
'
block
'
;
}
else
{
document
.
getElementById
(
'
textCharacters-validation
'
).
style
.
display
=
'
none
'
;
}
if
(
inputObj
.
readerLevel
===
''
)
{
invalidFields
++
;
document
.
getElementById
(
'
readerLevel-validation
'
).
style
.
display
=
'
block
'
;
}
else
{
document
.
getElementById
(
'
readerLevel-validation
'
).
style
.
display
=
'
none
'
;
}
if
(
inputObj
.
readerCategory
===
''
)
{
invalidFields
++
;
document
.
getElementById
(
'
readerCategory-validation
'
).
style
.
display
=
'
block
'
;
}
else
{
document
.
getElementById
(
'
readerCategory-validation
'
).
style
.
display
=
'
none
'
;
}
}
function
showFeedbackForm
()
{
let
x
=
document
.
getElementById
(
'
feedback-form
'
);
x
.
style
.
display
=
"
block
"
;
}
function
readerLevelChangeEvent
(
event
)
{
console
.
log
(
event
.
target
.
value
)
inputObj
.
readerLevel
=
event
.
target
.
value
;
}
function
readerCategoryChangeEvent
(
event
)
{
console
.
log
(
event
.
target
.
value
)
inputObj
.
readerCategory
=
event
.
target
.
value
;
}
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment